title: AngularJS: Reload data on div with controller and ng-repeat
body: <p>I am new in Angular JS and learning it. I have a div and load data from json on startup with controller with following code but I want to reload it again when json object changed after performing specific action.</p>
  
  <p>index.html</p>
  
  <pre><code>!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html ng-app="ezpf" xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;script src="lib/angular.js"&gt;&lt;/script&gt;
          &lt;script src="lib/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="EZPF.Application.initialize()"&gt;
          &lt;div id="btn-import" class="my-button button-small" onClick="EZPF.Application.openFile(this)"&gt;
                      &lt;span class="button-title"&gt;Import&lt;/span&gt;
                      &lt;span class="button-help"&gt;This button will do something                         else.&lt;/span&gt;                        
          &lt;/div&gt;
          &lt;div class="page" id="pro" ng-controller="ProductsListCtrl as store"&gt;
               &lt;div ng-repeat="product in store.products.Products"&gt;                     
                    {{product.Title}}
               &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>myAngular.js</p>
  
  <pre><code>(function()
  {
      var app = angular.module('ezpf', []);
      app.controller('ProductsListCtrl',['$scope', function($scope)
      {
          this.products = EZPF.Application.getProducts();     
          $scope.reload = function()        
          {           
              $scope.products = EZPF.Application.getProducts();           
          };
      }]);
  })();
  </code></pre>
  
  <p>In following javascript file I am opening JSON file and reload products object with new data. After updating with new JSON file contents I have to reload data. I have tried to call reload from controller but its not working. Please help me, thanks in advance.</p>
  
  <p>application.js</p>
  
  <pre><code>var EZPF;
  if (!EZPF) 
      EZPF = {};
  if (!EZPF.Application) 
      EZPF.Application = {};
  
  
  EZPF.Application = 
  {    
      products: [],
      getProducts: function()
      {
          if (this.products.length == 0) 
          {
              this.products = 
              {
                  "Products": [
                  {
                       "Title": "default name"
                       ....
                  }]
              }
          }
          return this.products;
      },
      openFile: function()
      {
          var docsDir = air.File.documentsDirectory;
          try 
          {
              var jsonFilter = new air.FileFilter("JSON Files", "*.json");
              docsDir.browseForOpenMultiple("Select JSON Files", [jsonFilter]);
              docsDir.addEventListener(air.FileListEvent.SELECT_MULTIPLE, filesSelected);
          } 
          catch (error) 
          {
              air.trace("Failed:", error.message)
          }
  
          function filesSelected(event)
          {
              air.trace(event.files[0].nativePath);
              var myFile = new window.runtime.flash.filesystem.File();
              var file = myFile.resolvePath(event.files[0].nativePath);
              var fileStream = new air.FileStream();
              fileStream.open(file, air.FileMode.READ);
              this.products = fileStream.readMultiByte(fileStream.bytesAvailable, air.File.systemCharset);
              fileStream.close();
              air.trace(products);
              $('#pro').reload();
          }
      }
  };
  </code></pre>