title: angular loading a json file on a form
body: <p>I've started recently working with angular and node.js. I'm trying to populate the content of a json file on some html forms depending on the option selected on a drop down list. I managed to do that but the problem is as soon as I change the content of the form manually, if I want to load the value that it was before (selecting the option from the drop down list) the value of the form doesn't change keeping the one I put manually.</p>
  
  <p>Does anybody know if there's a way to fix that?</p>
  
  <p>Thanks in advance.</p>
  
  <p>Sandra.</p>
  
  <p>Here it's my code:</p>
  
  <pre><code>- json file: content that I want to populate on the forms
  [
      {
          "host": "server1",
          "user": "dan",
          "pwd": "123456",
          "remotedir": "OUT",
          "localdir": "65_cargo/dmshared",
          "pattern":"FNVAC",
          "archive": "0",
          "monitor": "2"
      },
      {
          "host": "ftp.xmap.com",
          "user": "pront",
          "pwd": "x14ck",
          "remotedir": "OUT",
          "localdir": "107_sss/dmshared",
          "pattern":"csv",
          "archive": "0",
          "monitor": "2"
      }
  ]
  
  -html file: website
  
  &lt;!doctype html&gt;
  &lt;html ng-app="gtApp"&gt;
    &lt;head&gt;
      &lt;!--script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"&gt;&lt;/script--&gt;
      &lt;script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js" data-semver="1.0.7"&gt;&lt;/script&gt;
      &lt;script src="ftpsites.js" type="text/javascript"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div ng-controller="ftpSitesCtrl"&gt;
      &lt;h1&gt;TTS GetTrack Control Panel&lt;/h1&gt;
      &lt;h2&gt;Total FTP Sites {{ getTotalSites() }}&lt;/h2&gt; 
      &lt;p&gt;Select Site&lt;/p&gt;
      &lt;select ng-model="selectedItem" ng-options="item.host for item in ftpsites"&gt;
      &lt;/select&gt;
      &lt;div&gt;
        &lt;p&gt;Edit Site Details&lt;/p&gt;
        &lt;form&gt;
        &lt;table&gt;
          &lt;tr&gt;
            &lt;td&gt;Host&lt;/td&gt;
            &lt;td&gt;&lt;input type="text" value="{{selectedItem.host}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;User Name&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{selectedItem.user}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Password&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{selectedItem.pwd}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;Remote Directory&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{selectedItem.remotedir}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;Local Directory&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{selectedItem.localdir}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;File Pattern&lt;/td&gt;
              &lt;td&gt;&lt;input type="text" value="{{selectedItem.pattern}}"/&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Archive&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;&lt;option selected&gt;No&lt;/option&gt;&lt;option&gt;Yes&lt;/option&gt;&lt;/selected&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Monitor (Days)&lt;/td&gt;
              &lt;td&gt;&lt;select&gt;&lt;option="{{selectedItem.monitor}}"&gt;&lt;/option&gt;&lt;/selected&gt;&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/table&gt;
      &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  
  js file: logic
  
  var gtApp  =  angular.module('gtApp', []);
  
  gtApp.controller('ftpSitesCtrl', function($scope, $http){
      $http.get('ftpsites.json').success(function (data){
          $scope.ftpsites = data;
      });
  
      $scope.getTotalSites = function(){
          return $scope.ftpsites.length;    
      } 
  
      $scope.populateData = function(){
          $scope.host=ftpsites.host;
          //return $scope;
  
      }
  }); 
  </code></pre>