Angular Directive Bidirectional area not updating template

I have an angular directive esResizeand I have a problem with bidirectional binding in the selection area.

window.estimation.directive('esResize', function() {
    return {
        restrict:'C',
        scope: {
            pointGrid: '='
        },
        template: "<h2>{{ pointGrid }}</h2><ul><li ng-repeat='card in pointGrid track by $id(card)'>{{ card }}</li></ul>",
        controller: function($scope) {
            $scope.shiftTicket = function() {
                $scope.pointGrid.push("New Ticket");
            };
        },

        link: function(scope, element, attrs) {
            var height;    
            element.resizable({ 
                grid: [ 10, 20 ],
                handles: "n, s",
                start: function(event, ui) {
                    //initialize method
                },
                resize: function(event, ui) {
                    scope.shiftTicket();
                }
            });
        }
    };
});

When it resizestarts, it pointGridhas a “new ticket” pressed on it, when I display it on the console. However, the template is not updated. I don’t understand how bindings refer to representations or is there something else in the game here?

Edit: pointGrid in the view is just an array.