Home Ask Login Register

Developers Planet

Your answer is one click away!

user3712353 February 2016

Angular scope items not applies after item change

I have items service,items list controller, and item details controller:

.state('dashboard.items', {
        url: '/items',
        templateUrl: '/js/components/dashboard/items/items.html',
      .state('dashboard.items.details', {
        url: '/:id',
        templateUrl: '/js/components/dashboard/items/itemDetails.html',
        controller: 'itemDetailsCtrl',
          items: function (ItemService) {
              ItemService.getAll().then(function (res) {
                ItemService.items = res.data;

app.factory('ItemService', function ($http) {
  var itemsFactory = {};
  itemsFactory.getAll = function () {
    return $http.get('/items');

  itemsFactory.update = function () {
    itemsFactory.items[0].name = "sadasd";

  return itemsFactory;

app.controller('itemsListCtrl', function($scope, $state, ItemService){
  if(!ItemService.items) {
    ItemService.getAll().then(function (res) {
      ItemService.items = res.data;
      $scope.items = ItemService.items;
    $scope.items = ItemService.items;

app.controller('itemDetailsCtrl', function ($scope, items, ItemService) {
  $scope.item = ItemService.items[0];
  $scope.item.name = "abc" ;

  $scope.update = function(){

I have ng-click button which invokes the edit() function. I made it simple for the example, when doing the update, and edit the item name, the item that presents in the list doesnt change. I dont know what I miss here. The list sits in the service, and both controllers use it for their purposes.

What am I doing wrong? What is best practice for this scenario?

Update 1 Found something weird. When I edit the item in the controller initialization, it changes the original value globally. When it happens via the edit() metho


luk492 February 2016

$http.get returns a promise that it will return your data, so in .then you can do your stuff and it will execute when done(async)

$http.get('/items').then(function successCallback(response) {
 // this callback will be called asynchronously
 // when the response is available

 return response.data;//this is your data
}, function errorCallback(response) {
 // called asynchronously if an error occurs
 // or server returns response with an error status.

Post Status

Asked in February 2016
Viewed 1,507 times
Voted 4
Answered 1 times


Leave an answer

Quote of the day: live life