javascript - Trying to use $http in my Service and getting 'Error: error:unpr Unknown Provider' -

I am creating a web app with Kangaroo and gradually converting blocks of jQuery code into angular code I am here. Actually I am working on a model for many products. When a button is ng-clicked I want to load this HTML in the model.

As I was changing my Ajax code by looking down, I was stuck, I was trying to use $ http to drag it into HTML. You can use your old jQuery code .load () .

Error: $ Injector / unpr? P0 = *

Unable to resolve the expected dependency of this error, to correct the results of $ $ injection, make sure the dependency is defined and the spelling is correct.

  // Controller for training (open ng-click to start the model service) app.controller ('CoursesController', ['$ scope', 'Coursemodel ', Function ($ scope, curriculum model) {this.openModal = function (course) {coursemodel.openmodel (course);}}])); / * Service: For course models, / / ​​(function () {var app = angular module ('course-model', []); //app.service('CourseModal ', function ($ radius, $ http) {App.service ('coursemodal', ['$ scope', '$ http', function ($ radius, $ http) {this.openModal = function (course_name) {$ ('. Overlay'). Show (); $ Scope.data = {}; $ http.get ("component / training / model / course /" + course_name + ". Html"). Success (function (data, status, header, config) {// to this callback The call will be asynchronous / console.log (when the response is available); Warning (data);}). Error (function (Data, Status, Header, Configuration) {// Asynchronous call is made if an error occurs / or the server returns the response with an error status.}) // $ ('course_model'). Load ( "Component / training / model / course /" + course_name + ".html"); $ ('course_model') ein ('sharp'); $ ('. Close_modal'). Unbind ('click'). Bind ("Click", function {$ ('. Course_modal') Hide (); $ ('. Course_modal'). Lower (); $ ('.overlay'). Hide ();}); }}]]); }) ();  

Do you see where I am wrong? What do I need to do $ Http to work properly?

The strange thing is, for some reason I am not getting errors in this plunker here

postprice = " Text ">

I just recoded everything in Plunkr, and now get an error in my app, figure ...

/ * Service: Course Modals * (/ (Function () {var app = angular module ('course-model', []); app service ('course modal', function ($ http) {this.openModal = function (course_name) { // console log (course_name); // alert (course_name); $ http.get (course_name + ". Html"). Success (function (data, position, Header, configuration) {// This callback will be called asynchronous / when the answer is available console.log (data); alert (data); document getElementById ("load_html_here"). InnerHTML = data;}) error. (Function Data, status, header, configuration) {// asynchronous call is made, if there is an error with error status // the server is a response response}}}}};});