title: How to populate Angularjs $scope variable in javascript?
body: <pre><code>mapApp.controller("myController", function ($scope,$http) {
              $scope.namePlaceHolder= "Name";
              $scope.name = "";
  };
  </code></pre>
  
  <p>I bound a scope variable to an html input as follows.</p>
  
  <pre><code>&lt;input id="foo" type="text" placeholder="{{namePlaceHolder}}" ng-model="name" value="{{name}}"/&gt;
  </code></pre>
  
  <p>If a user types something in text box the $scope.name property changes. But when I change it using javascript the $scope.name data doesn't change.</p>
  
  <pre><code>on(document.getElementById("button"), "click", function (e) {
          document.getElementById("foo").value = "ascd...";
  })
  </code></pre>
  
  <p>This code does not populate $scope.name data.</p>