Updating Angular originally loaded via JSONP

Question

I have a resource that returns a JSONP payload:

app.factory('JsonService', function($resource) {
    return $resource('//123.456.7.890\\:8888/user/:id/:model',
    {'page': ':page', 'limit' : ':limit', 'jsonp_callback' : 'JSON_CALLBACK'}, 
    {})
});

Which gets called by my controller:

app.controller("followersCtrl", function ($scope, $dialog, JsonService) {
  ...
  $scope.user_id = $.globals.authed_user_id;
  $scope.model = "followers"
  $scope.loadJSONP = function (getPage) {
      JsonService.get({
          id: $scope.user_id,
          page: getPage,
          limit: $scope.pagination_limit,
          model: $scope.model
      },

      function (data) {
          $scope.followers = data;
          $scope.noOfPages = data.page_count;
          $scope.currentPage = data.page;
      });
  };
  $scope.loadJSONP(1);
  $scope.pageChanged = function (page) {
      $scope.callbackPage = page;
      $scope.loadJSONP(page);
  };
});

Then I loop over the data returned/stored in $scope.followers:

<div ng-controller="followersCtrl">
    ...
    // Code related to the modal omitted
    ...

<div ng-repeat="user in followers.data">
         <img class="img img-polaroid" ng-src="{{user.image_url}}"/>
     <p>{{ user.username }}</p>
         <button class="btn btn-disabled" ng-show="user.is_mutual">
          You Are following this user
         </button>
         <button class="btn btn-primary" ng-show="!user.is_mutual">
          You Aren\'t following
         </button>
     <p>{{user.total_followers}}</p>

</div>
    ...
    // Code related to the modal omitted
    ...
</div>

That all works as expected, but for the life of me I cannot figure out how to have the "You are not following" button change the value that's reflected inside the corresponding {{post.total_followers}} expression on click. Ideally, I would like to perform a PUT to actually perform the follow action, but I decided to start small and just update the value, to no avail.

Any help is appreciated. Thank you.

Answer 1

Is ng-click what you're looking for?

HTML:

<button class="btn btn-primary" ng-show="!user.is_mutual" ng-click="follow(user)">
  You Aren\'t following
</button>

JS:

app.controller("followersCtrl", 
  function ($scope, $dialog, JsonService) {
    $scope.follow = function(user){
      // code for posting to server-side follow action
      // and updating the total_followers
      // $scope.user.total_followers++; // this should be ideally incremented on success callback
    }
  }
);