Two controllers different HTML pages using same fa

问题:

I am stuck with Angular. I am trying to update an array on two different HTML pages, but this does not work. I tested this with giving the array an initial value and both pages display the values properly. Only when updating nothing happens on one page. I have tried these two things, but no luck and no errors in the console:

  .controller("ctrl1", function ($scope, Sender) {
        $scope.Sender = Sender;
        $scope.paired = Sender.paired;
        })

    .controller("ctrl2", function ($scope, Sender) {
        $scope.Sender = Sender;
        $scope.paired = Sender.paired;
        })

    .factory("Sender", function () {
        return {
            paired: [],
            fn: function (val) {
            this.paired.push(val);
              }
        }
    })

And this:

  .controller("ctrl1", function ($scope, Sender) {
        $scope.Sender = Sender;
        $scope.paired = Sender.paired;
        })

    .controller("ctrl2", function ($scope, Sender) {
        $scope.Sender = Sender;
        $scope.paired = Sender.paired;
        $scope.$watch('Sender.paired', function (newVal, oldVal, scope) {
        if(newVal) { 
        scope.paired = newVal;
    }
  });
        })

    .factory("Sender", function () {
        return {
            paired: [],
            fn: function (val) {
            this.paired.push(val);
              }
            }
        })

Thanks in advance for any suggestions.