Why does the scope change from the second call when writing a directive?

Question

Angular

(function () {
    'use strict';

    angular
        .module('app.widgets')
        .directive('pagination', pagination);

    function pagination() {
        var directive = {
            scope: {
                offset: "="
            },
            restrict: 'EA',
            link:link,
            template:' <button>Read more<button>'
        };
        return directive;
        function link(scope,element,attrs){
            element.bind('click', function () {
                ++scope.offset;
                scope.$apply();
            });
        }
    }
})();

<pagination offset="vm.filters.offset"/>
Module controller that uses the directive

$scope.$watch('vm.filters.offset',function(oldVal,newVal){
                    console.log(newVal);
               });

Here it first makes the log 1 (as set by default)
This is when loading
Then 1 by clicking (THIS MOMENT IS NOT CLEAR AND HOW TO FIX IT!!!!!!!)
Then only 2.3 .. etc

Answer 1

$scope.$watch('vm.filters.offset',function(newVal, oldVal){
    console.log(newVal);
});

The order of the arguments is incorrect.