title: (Angular) insert an object to json array
body: <p>I am trying to add new item to roleList json array.
  I have tried push / concat but it does not change the roleList array.
  Any way to solve the issue?</p>
  
  <pre><code>// The javascript :
  
  function RoleListCtrl($scope)
  {
      $('#myTab a[href="#role"]').tab('show');
  
      $scope.newCompanyName ="";
      $scope.newPosition="";
  
  
      $scope.addRole = function()
      {
          var newRole = new function() {
              this.companyName = $scope.newCompanyName;
              this.position    = $scope.newPosition;
              this.id          = '';
          }
  
          alert("test :"+newRole.companyName);
  
          $scope.roleList = $scope.roleList.push(newRole);
          // I have also tried this :   $scope.roleList = $scope.roleList.concat(newRole);
      }
  
      $scope.roleList = [
          {"companyName": "Company 01", "id":"1", "position": "CEO"},
          {"companyName": "Company 02", "id":"2", "position": "Board of Director"},
          {"companyName": "Company 01", "id":"1", "position": "CEO"},
          {"companyName": "Company 02", "id":"2", "position": "Board of Director"}
  
      ];
  }
  </code></pre>
  
  <p>Below is the button that called the addRole() :</p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
  &lt;div id="myModal" class="modal hide fade" ng-controller="RoleListCtrl"&gt;
  
      &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
          &lt;h3&gt;Add Role&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
  
          &lt;div class="control-group"&gt;
              &lt;label class="control-label pull-left" for="name"&gt;Company Name&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="coyName" ng-model="newCompanyName" placeholder="Company Name"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="control-group"&gt;
              &lt;label class="control-label pull-left" for="name"&gt;Role&lt;/label&gt;
              &lt;div class="controls"&gt;
                  &lt;input type="text" id="newRole" ng-model="newPosition" placeholder="Role"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="modal-footer"&gt;
          &lt;a href="#" class="btn"&gt;Close&lt;/a&gt;
          &lt;a href="#" class="btn btn-primary" ng-click="addRole()"&gt;Save changes&lt;/a&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div class="tab-pane" id="role" ng-controller="RoleListCtrl"&gt;
  
                      &lt;a class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;&lt;i class="icon-plus icon-white"&gt;&lt;/i&gt;Add New Role&lt;/a&gt;
                      &lt;BR&gt;
  
                      &lt;table class="table table-bordered table-white spacer5"&gt;
                          &lt;tr&gt;
                              &lt;th&gt;company name&lt;/th&gt;
                              &lt;th&gt;position&lt;/th&gt;
                              &lt;th&gt;action&lt;/th&gt;
                          &lt;/tr&gt;
  
                          &lt;tr ng-repeat="eachRole in roleList"&gt;
                              &lt;td&gt;{{eachRole.companyName}}&lt;/td&gt;
                              &lt;td&gt;{{eachRole.position}}&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;button ng-click="deleteRole($index)"&gt;delete&lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
  
                      &lt;/table&gt;
                      &lt;BR&gt;
  
                  &lt;/div&gt;
  </code></pre>