title: Angular js input models not accessible inside controller
body: <p>I am using this code to view and add peoples in an array.</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;body&gt;
  
  &lt;h1&gt;People&lt;/h1&gt;
  
  &lt;div ng-controller="Ctrl"&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="controller.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>add.html</strong></p>
  
  <pre><code>&lt;h1&gt;Add&lt;/h1&gt;
  
  &lt;input type="text" ng-model="new_name" placeholder="Name"&gt;
  &lt;br /&gt;
  &lt;input type="text" ng-model="new_age" placeholder="Age"&gt;
  
  &lt;br /&gt;
  &lt;button ng-click="add()"&gt;Add&lt;/button&gt;
  
  &lt;hr /&gt;
  &lt;a href="#/"&gt;Back&lt;/a&gt;
  </code></pre>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute']);
  
  app.config(function ($routeProvider){
      $routeProvider
          .when('/',{
              templateUrl: 'list.html'
          })
          .when('/add',{
              templateUrl: 'add.html',
  
          });
  });
  
  app.controller('Ctrl', function($scope) {
      $scope.people = [{'name':'Alex', 'age':25}, {'name':'Dan', 'age': 25}];
      $scope.add = function(){
          $scope.people.push({'name':$scope.new_name, 'age':$scope.new_age});
          $location.path("/");
      };
  });
  </code></pre>
  
  <p>The problem is, I am not getting data from <code>ng-model="new_name"</code> into the controller method <code>$scope.add = function()</code>. After pressing add button only blank strings gets pushed into array. However the model and controller working perfectly without routing and ng-view directive. I think its scope related problem. Can any body help me in this.
  Thanks.</p>