AngularJS data-binding doesn't work when input updated by third-party libraries

Question

The form is using jquery.placepicker to get addresses from a google map and ng-bs3-datepicker to set the date. I found that the data isn't updated in the controller's scope. How can I trigger the update of these fields manually?

<div class="form-group">
        <input class="form-control" id="placepicker" name="address" ng-model="customer.address" data-latitude-input="#lat" data-longitude-input="#long" data-map-container-id="map-container" />
        <p class="address-indicator" id="map-address"></p>
        <input hidden id="lat" ng-model="customer.geo.latitude" />
        <input hidden id="long" ng-model="customer.geo.longitude" />
        <div id="map-container" class="collapse">
            <div class="placepicker-map thumbnail"></div>
        </div>
    </div>

    <div class="form-group">
        <select class="form-control" name="account_type" ng-model="customer.account_type">
            <option value="" disabled selected>Type de Compte</option>
            <option value="INTERCO">Interco</option>
            <option value="INTERNET">Internet</option>
        </select>
    </div>
    <div class="form-group">
        <ng-bs3-datepicker ng-model="customer.date_subscription" language="fr-ca" date-format="DD-MM-YYYY">
        <!--<input class="form-control" placeholder="Place a datepicker!" name="date_subscription" ng-model="customer.date_subscription" />-->
    </div>

Answer 1

It's quite difficult without seeing your controller code, but you can try something like the following:

//Watch for Picker changes
$scope.$watch('customer.date_subscription', function(newValue, oldValue) {
   // Run your functions after the Picker is updated
   // Then refresh the $scope
   $scope.$apply();
}, false);

Please note that the call back function of $scope.$watch gives you access to the new and old values of the Picker, should you need them.

The last parameter (set to false in the example) let you apply the callback function only if the new and old value are different. If you set it to true, then the callback is called every time even if newValue === oldValue.

Hope this helps.