AngularJS watch not working in child controller

Question

I'm trying to use AngularJS and Angular-UI-Bootstrap to create a WebApp but as I'm rather new with all this, I need some help. I'm using ng-repeat and an array to create a Tab interface.

Depending on an action in the first Tab, a second Tab is added to the interface or should be refreshed if it's already open. I've got the Tab working and have a check to make sure it isn't added again when it's already open.

The basic structure is the following: One controller (TabController) to control the Tab interface, and one controller (Tab1 and Tab2) for each Tab that's added to the interface.

Now, I have the following problem, the content of the second tab should change depending on data changed in the first tab. When the user confirms the data in the first tab, I execute a function in the TabController (to add / activate the second tab) that also changes some data in the scope. I can't seem to be able to detect the change in this data in de second tab, I've created a watch for the field, but it's only fired the first time the tab is loaded. If I use the field itself, the data is changed, but the watch doesn't fire. Anyone got an idea how I can get this to work? The data that changes should be used to make changes to other information, that's the reason I'm trying to use a watch and execute a function...

I've created a Plunker that should demonstrate in a simple example what the problem is and what I'm trying to do (I hope...) DEMO

On the first Tab, there is a button to add a second tab (or activate it), as an example, I just increase a count that's displayed on both tabs. On the second tab, I have a local field on the scope that I fill with the global field using a $watch. When starting the first time, the global count is one, after adding the second tab, both the global as the local count on the second tab are 2. When I go back to the first tab and click the 'Add tab' button again, the global count on both tabs is 3, but the local count on the second tab remains 2 and the watch isn't fired.

As I'm new to Angular (and web programming) I might be trying to do something that goes against all the best practices, so if someone has a better / different way to do what I'm trying to do, feel free to make any suggestions.

Answer 1

Your watch expression was incorrect, the correct expression would be

    $scope.$watch("tabCount",
                  function() {
                    $scope.localCount = $scope.tabCount;
                  })
    }

instead of

    $scope.$watch($scope.tabCount,

The first one means you want to watch on a variable tabCountdefined over the scope.