title: Angularjs - ng-model not getting updated from javascript
body: <p>I have a jQuery based slider that updates an input box. The angular handle for the input box's content is not getting updated when slider moves though the value is updated (as shown in image)</p>
  
  <p><strong>Code</strong>:</p>
  
  <pre><code>&lt;form ng-app="myApp" ng-controller="myController" ng-submit="readData()" &gt;
      &lt;input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" &gt;
      &lt;button type="submit" value="Submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div id="slider-range"&gt;
      &lt;script&gt;
          $(function() {
              $( "#slider-range" ).slider({
                  range: true,
                  min: 0,
                  max: 15,
                  values: [ 3, 7 ],
                  slide: function( event, ui ) {
                      $( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
                  }
              });
          });
      &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" &gt;
      var app = angular.module('myApp', []);
  
      app.controller('myController',  function ($scope, $http, $templateCache, $interval, $timeout) {
          $scope.readData = function () {                
              alert($scope.duration); // always show the init value i.e. 3-7
          };
      });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Picture</strong>
   <img src="https://i.stack.imgur.com/La7yG.png" alt="View"></p>
  
  <p><strong>Edit 1</strong>: To investigate further, I am posting the whole code.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"&gt;
      &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
      &lt;script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="js/angular.js"&gt;&lt;/script&gt;
      &lt;title&gt;&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body &gt;
  
  &lt;form ng-app="myApp" ng-controller="myController" ng-submit="readData()" &gt;
      &lt;input type="text" id="amount" value="3-7" ng-model="duration" ng-init="duration='3-7'" &gt;
      &lt;button type="submit" value="Submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;div id="slider-range"&gt;
      &lt;script&gt;
  
      &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;script type="text/javascript" &gt;
      var app = angular.module('myApp', []);
  
      app.controller('myController',  function ($scope, $http, $templateCache, $interval, $timeout) {
          $scope.readData = function () {
              alert($scope.duration);
          };
      });
  
      $(function() {
          $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 15,
              values: [ 3, 7 ],
              slide: function( event, ui ) {
                  $( "#amount" ).val(  ui.values[ 0 ] + " - " + ui.values[ 1 ] );
              }
          });
      });
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>