(Angular) insert an object to json array

Question

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?

// 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"}

    ];
}

Below is the button that called the addRole() :

<form class="form-horizontal">
<div id="myModal" class="modal hide fade" ng-controller="RoleListCtrl">

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Add Role</h3>
    </div>

    <div class="modal-body">

        <div class="control-group">
            <label class="control-label pull-left" for="name">Company Name</label>
            <div class="controls">
                <input type="text" id="coyName" ng-model="newCompanyName" placeholder="Company Name">
            </div>
        </div>

        <div class="control-group">
            <label class="control-label pull-left" for="name">Role</label>
            <div class="controls">
                <input type="text" id="newRole" ng-model="newPosition" placeholder="Role">
            </div>
        </div>

    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary" ng-click="addRole()">Save changes</a>
    </div>

</div>
</form>

<div class="tab-pane" id="role" ng-controller="RoleListCtrl">

                    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal"><i class="icon-plus icon-white"></i>Add New Role</a>
                    <BR>

                    <table class="table table-bordered table-white spacer5">
                        <tr>
                            <th>company name</th>
                            <th>position</th>
                            <th>action</th>
                        </tr>

                        <tr ng-repeat="eachRole in roleList">
                            <td>{{eachRole.companyName}}</td>
                            <td>{{eachRole.position}}</td>
                            <td>
                                <button ng-click="deleteRole($index)">delete</button>
                            </td>
                        </tr>

                    </table>
                    <BR>

                </div>

Answer 1

This line is your problem:

$scope.roleList = $scope.roleList.push(newRole);

When you call push, it return the length (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push). You're essentially pushing the new Role into it and then replacing roleList with the length of the array, losing the array.

Answer 2

var currentList = $scope.roleList;
var newList = currentList.concat(newRoleArray);
$scope.roleList = newList;