Watch change on property of complex structure

Question

here is my story. I've a view that shows shifts per user per day.

My model is quite complicated and looks moreless like this:

planner = {
  //...
  entries: {
    '2016-03-01': {
      'user1': {
        date: '2016-03-01',
        id: 1,
        user: Object {}
        shift: Object {}
      },
      'user2': {
        //...
      }
    },
    '2016-03-02': {
      //...  
    }
  }
}

In controller i create a range of dates, array of users and iterate over my structure to create a cell for each user/day.

For each of my cells i have a directive with extension that on click, the controller setShift(cell, shift) is called, where i update the cell with new shift and do PUT.

But the problem is that, despite i set a new shift on that cell, the DOM is not changed.

I tried with $watch('planner', fn, true) and i see that the planner object has a new shift set for the cell but at the DOM, nothing changed.

I have to call loadAll that sets a newly fetched planner to the scope to see the DOM updates.

If you have a better idea, i'm waiting for it!

Cheers

EDIT: here goes controller

'use strict';

angular.module('myapp')
.controller('PlannerController', function ($scope, $state, Planner, ShiftEntry) {

    $scope.mom = moment();

    $scope.dateRange = [];

    $scope.planner = undefined;
    $scope.loadAll = function(year, month) {
        Planner.get({year: year, month: month+1}, function(result) {
            $scope.planner = result;
        });
    };
    $scope.$watchGroup(['mom.year()', 'mom.month()'], function(newValues, oldValues, scope) {
        $scope.loadAll(newValues[0], newValues[1]);
        $scope.dateRange = _.chain(
            _.range(1, $scope.mom.clone().endOf('month').date()+1))
            .map(function(d) {
                return moment().year(newValues[0])
                                .month(newValues[1])
                                .date(d);
            })
            .value();
    });

    $scope.switchMonth = function(dir) {
        //...
    };

    $scope.getColor = function(day, user) {
        //...
    };

    $scope.sum = function(day, shift) {
        //...
    };

    $scope.getEntry = function(day, user) {
        return $scope.planner.entries[day.format('YYYY-MM-DD')][user.login];
    };

    $scope.setShift = function(shiftEntry, shift) {
        shiftEntry.shift = shift;
        ShiftEntry.update(shiftEntry);
        // when line below is uncommented everything works and is updated
        //$scope.loadAll($scope.mom.year(), $scope.mom.month());
    };

    $scope.$watch('planner', function(newVal) {
        console.log(newVal);
    }, true );
});

and template

<div class="shiftChart">
        <div class="users pull-left">
            <div class="lbl">Employee</div>
            <div class="user clearfix" ng-repeat="user in planner.users">
                <img ng-src="assets/images/avatars/{{user.login}}.jpg" alt="{{user.login}}">
                <div class="name">{{user.firstName}} {{user.lastName}}</div>
                <div class="extra">{{user.login}}</div>
            </div>
        </div>
        <div class="dates-wrapper">
            <div class="dates pull-left" ng-repeat="day in dateRange" ng-class="{'weekend' : day.isWeekendDay(), 'today' : day.isSame(moment(), 'day')}">
                <div class="lbl">{{day.format('DD')}}</div>
                <div class="entries">
                    <div class="entry" ng-repeat="user in planner.users">
                        <div class="shift" style="background-color: ${{getColor(day, user)}}" planner-shift-changer></div>
                    </div>
                </div>
            </div>
        </div>
    </div>