Ionic + Angular not appending selected value to form input in callback

Question

I'm using cordova.contact plugin in my Ionic + Angular App.

In form after tap on icon is displayed contact picker. After selecting contact is passed selected contact name in callback and i'm trying to fill in into form.

Form input:

<a ng-click="takeContact()" class="button button-icon icon ion-settings form_input_custom_icon"></a>
              <label class="item item-input">
                  <span class="input-label">Name:</span>
                  <input type="text" value="{{plannedCallForm.contactName}}" ng-model="plannedCallForm.contactName">
              </label>

Controller method:

$scope.takeContact = function() {
            navigator.contacts.pickContact(function(contact){
                console.log('The following contact has been selected:' + JSON.stringify(contact));
                $scope.plannedCallForm.contactName = contact.displayName;
            },function(err){
                console.log('Error: ' + err);
            });
        };

Problem is that selected value is not appearing in the form input after selecting contact. Is need to call method again or tap into input to display this value.

Could somebody give me a advice, hot to solve it?

Thanks for any help.

Answer 1

I had the same problem using Facebook SDK. Using $apply you can do something like this:

$scope.takeContact = function() {
    navigator.contacts.pickContact(function(contact){
        console.log('The following contact has been selected:' + JSON.stringify(contact));
        $scope.$apply(function(){
            $scope.plannedCallForm.contactName = contact.displayName;
        });
    },function(err){
        console.log('Error: ' + err);
    });
};