title: Directive scope.$watch called after controller function
body: <p>So I have a controller and directive. I am having trouble understanding why my controller runs after my directive. I have scoured stack trying to find the answer but it seems like most of the answers are a case to case basis. </p>
  
  <p>My controller in its simplest form is as so</p>
  
  <pre><code>app.controller('MyCtrl', ['$scope', function ($scope){
  $scope.initAddress = {
      place_id: "",
      geometry: {
          location: {
              A: "",
              F: ""
          }
      },
  }
  $scope.gotoLocation = function (placeId) {
                     $scope.initAddress = {
                         place_id: "placeId",
                         geometry: {
                             location: {
                                 A: placeId.geometry.location.lat(),
                                 F: placeId.geometry.location.lng()
                             }
                         }
  }};}]);
  </code></pre>
  
  <p>When I click on my ng-click button I am going to the gotoLocation scoped function and redefining $scope.initAddress. My HTML is as follows:</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;my-map address="initAddress"&gt;&lt;/my-map&gt;
  &lt;/div&gt;
  &lt;div ng-repeat="place in placelistData.placeList"&gt;
      &lt;button ng-click="gotoLocation(place.id)"&gt;{{place.id}}&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now when I look at my directive, I am using </p>
  
  <pre><code> .directive('myMap', function () {
      return {
          restrict: 'E',
          replace: true,
          scope: {
              address: '=?',
          },
          template: '&lt;div class="dp-places-map-wrapper"&gt;&lt;input type="text" class="dp-places-map-input"&gt;&lt;div class="dp-places-map-canvas"&gt;&lt;/div&gt;&lt;/div&gt;',
  
          link: function (scope, element, attrs) {
  scope.$watch('address', function () {
     if (map &amp;&amp; scope.address)
     map.setCenter(getLocation(scope.address));
   });
   }
  </code></pre>
  
  <p>Right now, when I click the button it runs to the controller and $scopes.initAddress and doesn't hit $scope.watch. When I click it again, it hits $scope.watch first then it goes to my controller and updates accordingly. How can I change it so that it will hit the controller prior and then the $scope.watch catching the change in the controller. Rather than running $scope.watch first then running the controller. </p>
  
  <p>Thanks for the help</p>