angular controller function broken

Question

Below is a scratch of an application I'm working on:

<!doctype html>
<html ng-app>
    <head>
    <script src="/bower_components/angular/angular.js"></script>
        <script src="/bower_components/angular-youtube-mb/dist/angular-youtube-embed.min.js"></script>
        <script type="text/javascript">
            var myApp = angular.module('myApp', ['youtube-embed']);

            myApp.controller('MyCtrl', function ($scope) {
              // have a video id
              $scope.theBestVideo = 'i9MHigUZKEM';
            });
        </script>
    </head>
    <body ng-app="myApp">
        <div ng-controller="MyCtrl">
            <youtube-video video-id="theBestVideo"></youtube-video>
        </div>
    </body>
</html>

I can't find what is wrong, but I can see the Argument 'MyCtrl' is not a function, got undefined error in the chrome console. I think it's all there: the app, the controller, one bound to another. Can somebody point me out what is the problem here?

edit: in case it's relevant, I'm using 1.2.28 angular.js

Ved · Accepted Answer · 2015-01-19 07:53:23Z

2

A small mistake is there.
Change:<html ng-app>
To: <html ng-app="myApp">

answered Jan 19, 2015 at 7:53

Ved

12.1k5 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ducin Over a year ago

yeah, right... this is how you end up using boilerplates... Btw, what is recommended - attaching ng-app to <html> or to <body> tag?

Ved Over a year ago

attaching ng-app to is better idea.

Ved Over a year ago

There is no big difference where you put ng-app. If you put it on <body> then you have a smaller scope for AngularJS which is slightly faster.

Ved Over a year ago

AngularJS will bootstrap the first ng-app it finds! That's it. If you have more than one ng-app, it will only process the first one. This why you are getting error.

Sachin G. · Accepted Answer · 2015-01-19 08:38:28Z

1

I have verified your code,only thing you need to change is that remove this line

<html ng-app>

. Because you have used two html tags at beginning that's why you are getting error Argument 'MyCtrl' is not a function, got undefined.

edited Jan 19, 2015 at 8:38

answered Jan 19, 2015 at 8:33

Sachin G.

1551 silver badge9 bronze badges

Collectives™ on Stack Overflow

angular controller function broken

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related