Angular JS: Controller not working. all things work perfect when i try with ng-init

Question

I am new to AngularJS. I cannot get my controller to work. However, ng-init works perfectly. This is the code:

<div data-ng-controller="SimpleController">
  <input type="text" data-ng-model="yourName" placeholder="Enter a name here">
  <h3>
    <ul> 
      <li data-ng-repeat="cust in customers | filter:yourName | orderBy : 'name'"> {{ cust.name | uppercase }} - {{ cust.city | uppercase }} </li>
    </ul>
  </h3>
</div>
<script src="js/angular.min.js"></script>
<script>
  function SimpleController($scope) {
    $scope.customers = [{
      name: 'rutunj',
      city: 'surat'
    }, {
      name: 'aushik',
      city: 'Jugal'
    }, {
      name: 'kushik',
      city: 'Lugal'
    }];
  }
</script>

As @sarjan-desai mentioned in his solution, you need to bootstrap your application and define a module for your app. I would strongly recommend reading the [AngularJS tutorial](https://docs.angularjs.org/tutorial). — LordTribual, Oct 20 '15 at 06:31
You could look at this answer for just understanding why it was not working http://stackoverflow.com/a/28728380/2435473 — Pankaj Parkar, Oct 20 '15 at 06:38

score 2 · Accepted Answer · answered Oct 20 '15 at 06:25

In script you have done this

function SimpleController($scope) {
  $scope.customers = [{
    name: 'rutunj',
    city: 'surat'
  }, {
    name: 'aushik',
    city: 'Jugal'
  }, {
    name: 'kushik',
    city: 'Lugal'
  }];
}

But you haven't define angular module so change code as below inside script.

angular.module('myApp', []).controller('SimpleController', SimpleController);

function SimpleController($scope)
  // Controller code
}

and add ng-app in div like

<div ng-app="myApp" data-ng-controller="SimpleController">

Angular JS: Controller not working. all things work perfect when i try with ng-init

1 Answers1