title: AngularJS ng-model input with value
body: <p>I have inputs that has values and when I add an <code>ng-model</code> to each input, the value doesn't show up. Here is my code:</p>
  
  <p><strong>student-list.html</strong></p>
  
  <pre><code>&lt;!--edit form--&gt;
  &lt;div class="col s12" ng-show="dataForm"&gt;
    &lt;div class="row"&gt;
      &lt;div class="input-field col l6 s12"&gt;
        &lt;input id="first_name" value="{{student[0].fname}}" type="text" class="validate"&gt;
        &lt;label class="active" for="first_name"&gt;First Name&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="input-field col l6 s12"&gt;
        &lt;input id="last_name" value="{{ student[0].lname }}" type="text" class="validate"&gt;
        &lt;label class="active"  for="last_name"&gt;Last Name&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="input-field col l6 s12"&gt;
        &lt;input id="email" value="{{ student[0].email }}" type="text" class="validate"&gt;
        &lt;label class="active"  for="email"&gt;E-mail Address&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="input-field col l6 s12"&gt;
        &lt;input id="age" value="{{ student[0].age }}" type="text" class="validate"&gt;
        &lt;label class="active"  for="age"&gt;Age&lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;button class="btn waves-effect waves-light" ng-click="updateStudent()"&gt;Submit
    &lt;i class="material-icons right"&gt;send&lt;/i&gt;
    &lt;/button&gt;
    &lt;button class="btn waves-effect waves-light pink accent-3" ng-click="cancelEditStudent()"&gt;Cancel&lt;/button&gt;
  &lt;/div&gt;
  &lt;!-- form --&gt;
  &lt;table class="highlight responsive-table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Age&lt;/th&gt;
        &lt;th&gt;Email&lt;/th&gt;
        &lt;th&gt;Action&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr ng-repeat="s in students | filter:searchStudent" ng-show="studentsPanel"&gt;
        &lt;td&gt;{{ s.fname }} {{ s.lname }}&lt;/td&gt;
        &lt;td&gt;{{ s.age }}&lt;/td&gt;
        &lt;td&gt;{{ s.email }}&lt;/td&gt;
        &lt;td&gt;&lt;a href="javascript:void(0)" ng-click="editStudent(s.id)"&gt;Edit&lt;/a&gt; &lt;a href="javascript:void(0)" ng-click="deleteStudent(s.id)"&gt;Delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>studentController.js</strong></p>
  
  <pre><code>angular
      .module('studentInfoApp')
      .factory('Student', Student)
      .controller('StudentsController', StudentsController)
      .config(config);
  
  function config($routeProvider) {
      $routeProvider
      .when('/', {
          controller: 'StudentsController',
          templateUrl: 'app/views/student-list.html'
      })
      .otherwise({
          redirectTo: '/'
      });
  }
  
  function Student($resource) {
      //return $resource('/students/:id');
      return $resource("/students/:id", {}, {
          'get':    {method:'GET'},
          'save':   {method:'POST'},
          'query':  {method:'GET', isArray:true},
          'remove': {method:'DELETE'},
          'delete': {method:'DELETE'}
      });
  }
  
  function StudentsController(Student, $scope, $http) {
  $scope.editStudent = function(id) {
          Student.query({ id: id }, function(data, headers) {
              $scope.student = data;
              $scope.dataForm = true;
          }, function (error) {
              console.log(error);
          });
  
      }
  }
  </code></pre>
  
  <p>This actually works, however if I add a model in an input for example:</p>
  
  <pre><code>&lt;input id="first_name" value="{{student[0].fname}}" type="text" class="validate" ng-model="editForm.fname"&gt;
  </code></pre>
  
  <p>the input value won't show up anymore. Am I missing something here?</p>