How do you update an existing item in an Angular Array (that has changed externally)?

Question

I am new to Angular and am struggling with updating an existing item in my Angular array that has changed externally (not via Angular powered UI).

Here is the use case...My web page is populated via a server side call and I am loading the array into Angular and displaying on a list.

Now, if the data on the server changes and a new record is inserted in the table, my page's JavaScript is notified and it successfully inserts a new records into the Angular array via 'push' (Ref. Programmatically inserting array values in Angular JS).

However, my page is also notified when an existing record is changed (on the server side / not via Angular powered UI). I am drawing a blank about how do I go about updating the correct record in my Angular array? Is there a query / update method that I have missed in the Angular docs?

Here is what my current code looks like...

    //The HTML UI updates to reflect the new data inserts.
    <div ng-repeat="item in items">        
        <p class="priority">{{item.priority_summary}}</p>
        <p class="type">{{item.type}}</p>
    </div>

Here is the Script...

    var app = angular.module('DemoApp', []);

    <!-- Define controller -->
    var contrl = app.controller("MainController", function ($scope) {

    $scope.items = [{
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }, {
        "status": "New",
            "priority_summary": "High"
    }];

//The insert works fine. The question is how do I do an update if the notification is for an update, and not for insert.

    $scope.addItem = function(item)
    {
     alert("addItem called");
     $scope.items.push(item);
     $scope.item = {};
    }

      $scope.subscribe = function(){
        //Code for connecting to the endpoint...
        alert("event received"); //We receive this alert, so event is received correctly.

        $scope.items.push({
          status: 'New',
          priority_summary: 'H'
        });
        $scope.$apply();

        }

      //calling subscribe on controller initialization...
      $scope.subscribe();

Any suggestions or examples highlighting this would be great. Thanks!

Answer 1

I am assuming that you can retrieve the index of corresponding data you want to update. So, you can try.

dataList.splice(index, 1);
dataList.splice(index, 0, newItem);

Answer 2

$scope.setActive = function(user) {
  User.get({ id: user._id }, function(user){
      user.active = true;
      user.$update(function(user){
        angular.forEach($scope.users, function(u, i) {
          if (u._id === user._id ) {
            $scope.users[i] = user;
          }
        });
      });
    });
};