Why does my watcher gets called twice on the same change?
<p>I have an AngularJS 1.4* application running locally (yet). This app is served by an Laravel 5.1 backend RESTFul API.</p>

<p>I have to make this app that represents a package trip. A package is composed by days, ranging from 0 to N days. Each day have a list of services, ranging from 0 to N services. And a hotel.</p>

<p>My web server, from which my laravel application consumes from, delivers me a pre-setted package, containing a list of days: each one with a list of services and a hotel data (unused so far). On the response I have a list of properties for the package (that don't matter for now) and an array of days, called <code>days_info</code>. That response is being put in the <code>$scope.package</code>, on my <code>PackageController</code>. The <strong>PackageController</strong> also declares an directive called <code>packageBlock</code>, that consists in a list of days, and some other data for the package.</p>

<pre><code>&lt;div ng-repeat="day in package.days_info" class='row'&gt;
    &lt;div class='col-md-12'&gt;
        &lt;package-days-block&gt;&lt;/package-days-block&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Inside <code>&lt;package-days-block&gt;</code> directive, I have another to iterate through the list of services inside every day.</p>

<pre><code>&lt;div class='container-fluid' ng-repeat='service in day.services' ng-controller="ServiceController"&gt;
    &lt;service-block&gt;&lt;/service-block&gt;
&lt;/div&gt;
</code></pre>

<p>That's where the problem begins: to my undestandment, I now have a <code>$scope.service</code> inside my <code>ServiceController</code>. So, I started to change it on my need inside the <code>ServiceController</code> through a <code>$scope.service</code>.</p>

<p>The <strong>$scope.service</strong> has an attribute called <code>service_id</code>. I put a listener/watcher on it, so at any time the <strong>$scope.service.service_id</strong> is changed, I ask for another <code>service_table</code> (holds the informations about the services, it's based on the service_id previously choosen or changed by the user), and put it in the <code>$scope.service.table</code>.</p>

<pre><code>// ServiceController
$scope.reloadServicesTable = function(service_id, service_day, date, paxes){
    MandatoryService.getServiceTable(service_id, service_day, date, paxes)
    .then(
        function(service_data) {
            $scope.service.table = service_data;
        }, 
        ...
    );
</code></pre>

<p>The <code>reloadServicesTable</code> is called on the watcher for the <strong>service_id</strong> changes.</p>

<pre><code>// ServiceController
$scope.$watch(
    'service.service_id', // Places the watcher to watch the changes on the service's ID.
    function(new_service, old_service) {
        if( new_service === old_service )
            return; 

        $scope.reloadServicesTable($scope.service.service_id, $scope.service.service_day, $scope.day.date, $scope.package.paxes);

    }
);
</code></pre>

<p>The problem starts here: the request for the service's table is called twice when the service_id only changes once. </p>

<p><strong>WHY, GOD, WHY?!</strong></p>

<p>There's another part of my code where I, from the <em>PackageController</em>, run through the entire <code>days_info</code> array and reads the value of an attribute <code>price</code> inside the service.table: <code>service.table.price</code>. In there, I realise that there's two <strong>scope</strong>'s: the one I handling and the other that I have no <strong>FREAKING IDEA</strong> where it came from! </p>

<p>If I put an <code>console.log($scope);</code> inside the method that runs through the <em>days_info</em>, I get two scopes for every request. This method is on the <em>PackageController</em>.</p>

<p>Any ideas why this is happening?</p>

<p>P.S.: It's my very first AngularJS application, so, take easy if I messed up on something basic...</p>

<p><strong>EDIT:</strong></p>

<p>As pointed out by an fellow on the comments, my question wasn't very reproducible. Sadly, I can't put here only the part I'm having doubts cause I don't have the slightest idea where the problem lies! (I know that this isn't much of help)</p>

<p>I took some screen shots from the Chrome Console:</p>

<p>First, the requestions fired on the change of the service_id</p>

<p><a href="https://i.stack.imgur.com/oS4vp.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oS4vp.png" alt="Request log for the service change (ordered by path name)"></a></p>

<p>As you can see, every request is called twice everytime. This is not an one-time-thing. The <code>/api/service/{id}...</code> is the call for the service's table information. The <code>/api/service/by_route/origin/...</code> returns an list of services from one city to another (or the same). One does not interfere on the other.</p>

<p>The other image is the output from a <strong>console.log</strong> from the PackageController $scope, on the time that the service_id is being changed.</p>

<p><a href="https://i.stack.imgur.com/bi1DM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bi1DM.png" alt="Scopes for the PackageController"></a></p>

<p>As you can see, there's two different scopes. And the <code>b</code> scope is son of the <code>r</code> scope. The <code>r</code> scope is also calling the watcher on the <code>service_id</code>?</p>

<p>The call for the sums price is been called twice from differente places, as you can see in the image below:</p>

<p><a href="https://i.stack.imgur.com/DdrNP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/DdrNP.png" alt="Call Stack for the sumPrices method on PackageController"></a></p>