0

I am a new with AngularJS, and I am trying to bind data to the form controller, but it is not working.

HTML

<div ng-app="myapp"  data-ng-controller="simpleContr">
    <ul>
        <li data-ng-repeat="user in users">
            {{ user.name }}
        </li>
    </ul>
</div>

AngularJS

angular.module('myapp', []).controller('simpleContr', function($scope) {
    $scope.users = [
        { name:'Ashraf', city:'Cairo'},
        { name:'Ali', city:'Assuit'},
        { name:'Mohammed', city:'Qena'}
    ];
});
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Ashraf Hefny
  • 508
  • 1
  • 6
  • 20
  • Any errors in the console – tymeJV Oct 20 '14 at 23:20
  • If you are using JSFiddle to test this, make sure that you select `No wrap - in ` ([Explanation](http://stackoverflow.com/questions/22406633/angularjs-uncaught-error-injectormodulerr-failed-to-instantiate-module)) – Mr. Polywhirl Oct 20 '14 at 23:25
  • You code works: http://jsfiddle.net/jwqnm05f/ you probably forgot to add a reference to the AngularJs library – Josep Oct 20 '14 at 23:26
  • @Josep Even if @Ashraf did use JSFiddle, the default is `onLoad`, which will not work. – Mr. Polywhirl Oct 20 '14 at 23:28
  • @Mr.Polywhirl the OP hasn't mention anything about jsFiddle. I already knew that, if you check my jsFiddle example I'm already doing that. – Josep Oct 20 '14 at 23:31
  • @Mr.Polywhirl sure, and if the OP is using plunker then they have to make sure to include the library and if they are using jsbin same thing and if... You could make a long list here, the point is that the code works and that IMO there is no need for an answer because there is nothing wrong with the code. – Josep Oct 20 '14 at 23:34

1 Answers1

0

The following works below, because the javascript is inserted into the head of the output document.

How to structure the <head>

<head>
    <script type="text/javascript" src="angular.js"></script>

    <script type="text/javascript">
        // Your controller code...
    </script>
</head>

Working snippet

angular.module('myapp', []).controller('simpleContr', function ($scope) {
    $scope.users = [{
        name: 'Ashraf',
        city: 'Cairo'
    }, {
        name: 'Ali',
        city: 'Assuit'
    }, {
        name: 'Mohammed',
        city: 'Qena'
    }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" data-ng-controller="simpleContr">
    <ul>
        <li data-ng-repeat="user in users">{{ user.name }}</li>
    </ul>
</div>
Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132