title: AngularJS: How to pass data from view to controller in angularjs
body: <p>I'm developing an application which adds/edits/removes contacts.
  Here is how my adding contact view template looks like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input placeholder="name" ng-model="contact.name" type="text"&gt;
  &lt;input placeholder="number" ng-model="contact.number" type="text"&gt;
  &lt;a href="#/"&gt;&lt;button&gt;Add&lt;/button&gt;&lt;/a&gt;
  </code></pre>
  
  
  
  <p>And here is my controllers file, the controller used for adding is the last one:
  </p>
  
  <pre class="lang-js prettyprint-override"><code>var myApp = angular.module('myApp', ['ngRoute']).config(function ($routeProvider) {
      $routeProvider.when('/contact/:index', {
          templateUrl: 'partials/edit.html',
          controller: 'Edit'
      }).when('/', {
          templateUrl: 'partials/contacts.html'
      }).when('/add', {
          templateUrl: 'partials/add.html',
          controller: 'Add'
      })
      .otherwise({ redirectTo: '/' });
  }).controller('Contacts',  ['$scope',function($scope){
      $scope.contacts = [
      {name:'Hazem', number:'01091703638'},
      {name:'Taha', number:'01095036355'},
      {name:'Adora', number:'01009852281'},
      {name:'Esmail', number:'0109846328'}
      ];
  }]).controller('Edit', ['$scope','$routeParams',function($scope,$routeParams){
      $scope.contact = $scope.contacts[$routeParams.index];
      $scope.index = $routeParams.index;
  }]).controller('Add', ['$scope', function($scope){
      $scope.contacts.push({name: contact.name, number: contact.number});
  }]);
  </code></pre>
  
  <p>I've got an error in the chrome inspector says:
      ReferenceError: contactname is not defined</p>