title: Two-way binding between controller and directive with $watch in controller not working
body: <p>I've come across a quite a few similar questions and tried them all with no success. I'm not sure if I'm doing this the "Angular way" so I might need to change my approach. In short I'm initialising a scoped variable from within a controller, the variable is then shared with the directive's scope. However when this value is changed as part of a user interaction the new value is not being synchronised with the controllers variable. My abbreviated code follows:</p>
  
  <h1>Controller</h1>
  
  <p>The $watch method is only called once i.e. when the page loads.</p>
  
  <pre><code>.controller('NewTripCtrl', ['$scope', function($scope) {
    $scope.pickupLocation;
    $scope.dropoffLocation;
  
    $scope.$watch('dropoffLocation', function(oldVal, newVal) {
      console.log('dropofflocation has changed.');  
      console.log(oldVal);
      console.log(newVal);
    });
  }])
  </code></pre>
  
  <h1>HTML</h1>
  
  <pre><code>&lt;div class="padding"&gt;
    &lt;input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Pickup Address" location="pickupLocation"&gt;&lt;/input&gt;
  &lt;/div&gt;
  
  &lt;div class="padding"&gt;
    &lt;input ion-google-place type="text" class="ion-google-place" autocomplete="off" service="places" placeholder="Dropoff Address" location="dropoffLocation"&gt;&lt;/input&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <h1>Directive</h1>
  
  <pre><code>angular.module('ion-google-place', [])
    .directive('ionGooglePlace', [
      '$ionicTemplateLoader',
      '$ionicBackdrop',
      '$q',
      '$timeout',
      '$rootScope',
      '$document',
      function ($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $document) {
        return {
          restrict: 'A',
          scope: {
            location: '=location'
          },
          link: function (scope, element, attrs) {
            scope.locations = [];
            console.log('init');
            console.log(scope);
            console.log(attrs);
            // var geocoder = new google.maps.Geocoder();
            var placesService = new google.maps.places.AutocompleteService();
            var searchEventTimeout = undefined;
  
            var POPUP_TPL = [
          '&lt;div class="ion-google-place-container"&gt;',
          '&lt;div class="bar bar-header item-input-inset"&gt;',
          '&lt;label class="item-input-wrapper"&gt;',
          '&lt;i class="icon ion-ios7-search placeholder-icon"&gt;&lt;/i&gt;',
          '&lt;input class="google-place-search" type="search" ng-model="searchQuery" placeholder="' + 'Enter an address, place or ZIP code' + '"&gt;',
          '&lt;/label&gt;',
          '&lt;button class="button button-clear"&gt;',
          'Cancel',
          '&lt;/button&gt;',
          '&lt;/div&gt;',
          '&lt;ion-content class="has-header has-header"&gt;',
          '&lt;ion-list&gt;',
          '&lt;ion-item ng-repeat="l in locations" type="item-text-wrap" ng-click="selectLocation(l)"&gt;',
          '{{l.formatted_address || l.description }}',
          '&lt;/ion-item&gt;',
          '&lt;/ion-list&gt;',
          '&lt;/ion-content&gt;',
          '&lt;/div&gt;'
            ].join('');
  
            var popupPromise = $ionicTemplateLoader.compile({
              template: POPUP_TPL,
              scope: scope,
              appendTo: $document[0].body
            });
  
            popupPromise.then(function (el) {
              var searchInputElement = angular.element(el.element.find('input'));
  
              // Once the user has selected a Place Service prediction, go back out
              // to the Places Service and get details for the selected location.
              // Or if using Geocode Service we'll just passing through
              scope.getDetails = function (selection) {
                //console.log('getDetails');
                var deferred = $q.defer();
                if (attrs.service !== 'places') {
                  deferred.resolve(selection);
                } else {
                  var placesService = new google.maps.places.PlacesService(element[0]);
                  placesService.getDetails({
                      'placeId': selection.place_id
                    },
                    function(placeDetails, placesServiceStatus) {
                      if (placesServiceStatus == "OK") {
                        deferred.resolve(placeDetails);
                      } else {
                        deferred.reject(placesServiceStatus);
                      }
                    });
                }
                return deferred.promise;
              };
  
  
              // User selects a Place 'prediction' or Geocode result
              // Do stuff with the selection
              scope.selectLocation = function (selection) {
                // If using Places Service, we need to go back out to the Service to get
                // the details of the place.
                var promise = scope.getDetails(selection);
                promise.then(onResolve, onReject, onUpdate);
                el.element.css('display', 'none');
                $ionicBackdrop.release();
              };
  
              function onResolve (details) {
                console.log('ion-google-place.onResolve');
  
                scope.location = details;
  
                $timeout(function() {
                  // anything you want can go here and will safely be run on the next digest.
                  scope.$apply();
                })
  
                if (!scope.location) {
                  element.val('');
                } else {
                  element.val(scope.location.formatted_address || '');
                }              
              }
              // more code ...
        };
      }
    ]);
  </code></pre>
  
  <p>The $watch function only detects a change when the page loads but never again. What is the correct way to provide the controller with the value that the user enters into the directive's input element?</p>