What is wrong with this controller?

Question

The code below where I create a controller within index.htmls <script></script> doesn't work. What is wrong here? I do know I can make it work by having a separate app.js and define there. But interested to know why this doesn't work.

<!DOCTYPE html>
<html data-ng-app>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div data-ng-controller="SkillsController">
 <ul>
   <li data-ng-repeat="skill in skills">{{skill.name}} - {{ skill.stars}}</li>
 </ul>
</div>
<script>
    function SkillsController($scope) {
        $scope.skills = [
            { name: 'Ruby', stars: 5 },
            { name: 'Java', stars: 10}
        ];
    }
</script>
<script type="text/javascript" src="js/angular.js"></script>
</body>
</html>

in angular 1.3 global controllers not support please refer this http://stackoverflow.com/questions/26646941/getting-an-error-when-using-ng-controller-in-angularjs-ver-1-3-0/26647015#26647015 — Kalhan.Toress, Nov 27 '14 at 11:48

score 2 · Answer 1 · answered Nov 27 '14 at 11:56

Use This it will help you

Check This Link http://plnkr.co/edit/uKDBnQ9Ulk43m9xSQ9YU?p=preview

 <!DOCTYPE html>
 <html data-ng-app="myApp">
    <head lang="en">
     <meta charset="UTF-8">
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js">     </script>
    </head>
 <body>
   <div data-ng-controller="SkillsController">
     <ul>
       <li data-ng-repeat="skill in skills">{{skill.name}} - {{ skill.stars}}</li>
     </ul>
  </div>

   <script>

     var app = angular.module("myApp",[]);
     app.controller('SkillsController', function($scope){
       $scope.skills = [
        { name: 'Ruby', stars: 5 },
        { name: 'Java', stars: 10}
      ];
     })
   </script>
    <script type="text/javascript" src="js/angular.js"></script>
  </body>
</html>

What is wrong with this controller?

1 Answers1