Question: I am learning Angularjs. I have started with <http://fastandfluid.com/publicdownloads/AngularJSIn60MinutesIsh_DanWahlin_May2013.pdf> 

Most of the tutorial examples worked fined until I dashed into the following code: 

```
<html>
    <head>
    </head>
<body data-ng-app=''>   
<div data-ng-controller="simpleController" >
<ul>
  <li data-ng-repeat="x in names">
    {{ x.name}}
  </li>
</ul>
<script src='angular.min.js'></script>
<script>
function simpleController($scope){      
    $scope.names = [ 
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
        ];
}
</script>
</div>

    </body>
</html>

```

Answer: 
You are using a controller with out creating a module. You have to create a module before handling the controller.

In older versions of Angular JS(<1.3) you can create a controller with out a module. But in later versions it is not possible.

Please have a look at the below code 

```
<!DOCTYPE html>
<html>  
  <head>
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15">      </script>
  </head>

  <body data-ng-app='myapp'>
    <div data-ng-controller="simpleController">
     <ul>
      <li data-ng-repeat="x in names">{{ x.name}}</li>
     </ul>
   </div>

<script>
var app = angular.module('myapp', [])
 app.controller('simpleController', function($scope) {
  $scope.names = [{
    name: 'Jani',
    country: 'Norway'
  }, {
    name: 'Hege',
    country: 'Sweden'
  }, {
    name: 'Kai',
    country: 'Denmark'
  }];

});
</script>
</body>

</html>

```

OR

```
<!DOCTYPE html>
<html>    
  <head>
    <script data-require="angular.js@*" data-semver="1.4.0-beta.6" src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
  </head>

 <body ng-app='myapp'>
  <ul ng-controller='simpleController'>
    <li ng-repeat='x in names'>{{x}}</li>
  </ul>

 <script>
  function simpleController($scope) {
    $scope.names = [{
      name: 'Jani',
      country: 'Norway'
    }, {
      name: 'Hege',
      country: 'Sweden'
    }, {
      name: 'Kai',
      country: 'Denmark'
    }];
  }

  simpleController.$inject = ['$scope'];
  angular.module('myapp', []).controller('simpleController', simpleController)
  </script>

```
The better way to do is creating controllers.js for controller

```
<html ng-app='myapp'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div data-ng-controller="simpleController" >
  <ul>
    <li data-ng-repeat="x in names">
      {{ x.name}}
    </li>
  </ul>
</div>
</body>
</html>

```

The logic in controllers.js should be with module:

```
var app = angular.module('myapp', [])
 app.controller('simpleController', function($scope) {
  $scope.names = [{
    name: 'Jani',
    country: 'Norway'
  }, {
    name: 'Hege',
    country: 'Sweden'
  }, {
    name: 'Kai',
    country: 'Denmark'
  }];

});

```