AngularJS data-ng-controller doesn't work

angularjs, html, javascript

Solution

It is to do with the version of angular you are using.

Earlier versions of Angular allowed the ability to assign controller functions to the global scope like you did. Then this ability was removed from angular. There are still alot of tutorials around that reference this older style however.

See this demo - http://jsbin.com/fowamutoli/1/edit

I have replaced with angular legacy and your code runs.

So in the future you need to declare an angular module and register your controller against it. i.e.

<html data-ng-app="app">


 <script>

        var app = angular.module('app', []).  
            controller('simpleController', function ($scope) {
                $scope.customers = [
                    { Name: "Dave Jones",  City: "Phoenix" }
                    , { Name: "Jamie Riley", City: "Atlanta" }
                    , { Name: "Heedy Walhin", City: "Chandler" }
                    , { Name: "Thomas Winter", City: "Seattle" }
                ];
            });
  </script>

Problem

I could not figure out why the following code doesn't work at all. Frankly, It looks alright to me. Is there any idea? ``` <!DOCTYPE html> <html data-ng-app=""> <head> <title>Using AngularJS to create a simple Controller</title> </head> <body> <div data-ng-controller="simpleController"> <ul> <li data-ng-repeat="cust in customers">{{ cust.Name | uppercase }} - {{ cust.City | lowercase }}</li> </ul> </div> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"> </script> <script> function simpleController($scope) { $scope.customers = [ { Name: "Dave Jones", City: "Phoenix" } , { Name: "Jamie Riley", City: "Atlanta" } , { Name: "Heedy Walhin", City: "Chandler" } , { Name: "Thomas Winter", City: "Seattle" } ]; } </script> </body> </html> ```

Original source