title: Pushing Item to Json Array angularjs
body: <p>I am new to angularjs. I am currently doing a mobile app with ionic (that's why I have to use angularjs). I have an array and I created a add form with a button so that I can add item in the array. I have created some dummy data first because I want to test it around. I am not sure how to implement an add button so that user can add the item to that array (tempData).</p>
  
  <p>Here is my code.</p>
  
  <p>json-dummyObject.js</p>
  
  <pre><code>angular.module('app')
  .factory('WebApi', function () {
      var owners = [{
  
          value: "Amy",
          text: "Amy",
      }, {
  
          value: "Peter",
          text: "Peter"
      }, {
          value: "Jim",
          text: "Jim"
      }];
  
          var sex = [{
  
          value: "Male",
          text: "Male",
      }, {
  
          value: "Female",
          text: "Female"
      }];
  
          var country = [{
  
          value: "Canada",
          text: "Canada",
      }, {
  
          value: "US",
          text: "United States"
      },{
          value: "China",
          text: "China"
      }];
  
      var tempData = [];
      var someDate = new Date();
  
      //Display 100 dummy item 
      for (var i = 0; i &lt; 100; i++) {
  
  
          var selectedCountry = country[Math.floor((Math.random() * country.length))];
          var selectedSex = sex[Math.floor((Math.random() * sex.length))];
          var selectedOwners = owners[Math.floor((Math.random() * owners.length))];
  
         tempData.push({
              id: i,
              owners: selectedOwners.text,
              country: selectedCountry.text,
              sex: selectedSex.text,
          })
      };
  
      return {
          getAll: function () {
              return tempData;
          },
          getCountry: function(){
             return selectedCountry.text;
      },
          getSex: function(){
             return selectedSex.text;
   },
        getOwners: function(){
              return selectedOwners.text;
             }
         }
  });
  </code></pre>
  
  <p>Here is my add form </p>
  
  <pre><code>&lt;ion-view&gt;
      &lt;ion-header-bar class="bar bar-header bar-energized"&gt;
          &lt;h1 class="title" style="color:black"&gt; Add Data &lt;/h1&gt;
      &lt;/ion-header-bar&gt;
  
      &lt;ion-content&gt;
          &lt;div ng-controller="addCtrl"&gt;
              &lt;form name="addForm" ng-submit="submitForm()"&gt;
  
                  &lt;label class="item item-input item-select"&gt;
                      &lt;b class="input-label"&gt;Owner:&lt;/b&gt;
                      &lt;select ng-model="newOwner" required&gt;
                          &lt;option value="" title="Select Owner" selected disabled&gt;Owner&lt;/option&gt;                      
                          &lt;option ng-repeat="owner in owners" value="{{owner.value}}"
                                  ng-selected="{{owner.value== owners}}"&gt;
                              {{owner.value}}
                          &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/label&gt;
  
               &lt;label class="item item-input item-select"&gt;
                      &lt;b class="input-label"&gt;Sex:&lt;/b&gt;
                      &lt;select ng-model="newSex" required&gt;
                          &lt;option value="" title="Select Sex" selected disabled&gt;Sex&lt;/option&gt;                      
                          &lt;option ng-repeat="sexItem in sex" value="{{sexItem.value}}"
                                  ng-selected="{{sexItem.value== sex}}"&gt;
                              {{sexItem.value}}
                          &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/label&gt;
  
  
               &lt;label class="item item-input item-select"&gt;
                      &lt;b class="input-label"&gt;Country:&lt;/b&gt;
                      &lt;select ng-model="newCountry" required&gt;
                          &lt;option value="" title="Select Sex" selected disabled&gt;Sex&lt;/option&gt;                      
                          &lt;option ng-repeat="countryItem in country" value="{{countryItem.value}}"
                                  ng-selected="{{countryItem.value== country}}"&gt;
                              {{countryItem.value}}
                          &lt;/option&gt;
                      &lt;/select&gt;
                  &lt;/label&gt;
  
              &lt;a class="button" ng-click="add()"&gt;Add to List&lt;/a&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
  
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>Finally this is my controller:</p>
  
  <pre><code> angular.module('app')
  
      .controller('addCtrl', function ($scope,WebApi) {
              $scope.country = WebApi.getCountry();
  $scope.sex = WebApi.getSex();
          $scope.owners = WebApi.getOwners();
          $scope.tempData = WebApi.getAll();
  
           $scope.add = function(){
               //Not sure how to get it work (Need help here
            }
      });
  </code></pre>