title: Filling data in form using angular
body: <p>I am a true beginner at Angular (but not JS), started yesterday, so I hope you forgive me if this question sound stupid. Consider the following small application:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="todoApp"&gt;
      &lt;head&gt;
          &lt;script src="http://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
          &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="/js/TestController.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-controller="TestController as myControl"&gt;
          &lt;div id="overlaybox"&gt;
              &lt;button ng-click="myControl.showUpd(4)"&gt;Test&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
              &lt;form ng-submit="myControl.updTodo()"&gt;
                  Note:&lt;br/&gt;
                  &lt;textarea rows="5" cols="30" id="updContent" ng-model="noteupd.content"&gt;&lt;/textarea&gt;&lt;br/&gt;
                  Deadline (format YYYY-MM-DD HH:MM):&lt;br/&gt;
                  &lt;input type="text" id="updDeadline" ng-model="noteupd.deadline" /&gt;&lt;br/&gt;
                  Completed: 
                  &lt;input type="checkbox" id="updCompleted" ng-model="noteupd.completed" /&gt;&lt;br/&gt;
                  &lt;input type="hidden" id="updID" ng-model="noteupd.id" /&gt;&lt;br/&gt;
                  &lt;input type="submit" value="Update" /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Angular-controller:</strong></p>
  
  <pre><code>angular.module('todoApp', []).controller('TestController', function($scope, $http) {
      var thisApp = this;
  
      thisApp.showUpd = function(noteID) {
          $http({method : 'GET', url : 'http://localhost:8000/notes/' + noteID})
              .then (function(response) {
                  console.log(response.data.content);
                  console.log(response.data.deadline);
                  console.log(response.data.id);
                  console.log(response.data.completed);
  
                  document.getElementById("updContent").innerHTML = response.data.content;
                  document.getElementById("updDeadline").value = response.data.deadline;
                  document.getElementById("updID").value = response.data.id;
  
                  if (response.data.completed == 1) {
                      document.getElementById("updCompleted").checked = true;
                  } else {
                      document.getElementById("updCompleted").checked = false;
                  }
              }, function() {
                  alert("Error getting todo note");
              });
      }
  
      thisApp.updTodo = function(noteupd) {
          console.log("TEST");
          console.log($scope.noteupd);
      }
  });
  </code></pre>
  
  <p>After clicking Test-button I get the following output in my console:</p>
  
  <ul>
  <li>TestController.js:7 123123</li>
  <li>TestController.js:8 2016-01-05 10:28:42</li>
  <li>TestController.js:9 4</li>
  <li>TestController.js:10 0</li>
  </ul>
  
  <p>By then, the fields in the form have been filled in (and the hidden field has a value). And after clicking Update I get this in the console:</p>
  
  <ul>
  <li>TestController.js:27 TEST</li>
  <li>TestController.js:28 undefined</li>
  </ul>
  
  <p>If i change the values in the fields manually, I do get something else instead of "undefined", but the idea is that one should not have to change the values. Also, the object does not contain the hidden "id" even if all fields are changed.</p>
  
  <p>Obviously, I'm a beginner at this, and obviously I'm doing it wrong, but do anyone have a suggestion on how I can make this work?</p>