Angularjs:Ng-Model Binding Not Updating When Changed With Jquery

AngularJS : ng-model binding not updating when changed with jQuery

Angular doesn't know about that change. For this you should call $scope.$digest() or make the change inside of $scope.$apply():

$scope.$apply(function() { 
   // every changes goes here
   $('#selectedDueDate').val(dateText); 
});

See this to better understand dirty-checking

UPDATE: Here is an example

angularjs ng-model doesn't update

The main reason your code isn't working as intended is that Angular only watches for user interaction events in order to update the model. Your icon picker completely bypasses Angular by directly setting the value in the input.

In order to update the model you need to set a hook on the icon picker updating process : whenever you select an icon, either overwrite the iconInput scope variable yourself (and wrap this in a $scope.$apply call) or much more simply, trigger the 'input' event on the input element, which will cause Angular to pick up the new value (see here).

I suggest you do something like this :

editCellTemplate: function (container, options) {
    container.html('<input class="icon-picker-input edit icp icp-auto" type="text" ng-model="iconInput" />');
    options.setValue($scope.iconInput);        
    $compile(container)($scope);

    // Avoid inline script tags, you can make the iconpicker here
    $(".icp-auto").iconpicker();

    // Watch for icon picker selections
    $(".icp-auto").on('iconpickerSelected', function(e) {
        // Fire the "input changed" event
        $(e.currentTarget).trigger('input');
    });
}

Notice I removed the script tag inside your compiled html because you can perfectly instantiate the icon picker in your main code. Script tags evaluate in the global context which is often not what you want.

Update : The compile-time error you reported in your comment is due to the fact that your Typescript setup has a definition for the JQuery class (probably a jquery.d.ts file) which does not include an iconPicker() method. At runtime the content of the <script> tag compiled in Angular is directly interpreted as plain Javascript, avoiding Typescript's type checking.

See this answer for a simple way to enable additional methods on the JQuery interface. I strongly recommend you stop putting logic in compiled <script> elements, there is a high chance it will come back to bite you.

AngularJS view not updating while model changed changed after clicking input fields for some time

You can force the view to render with $scope.$apply()

$apply() is used to execute an expression in AngularJS from outside of the AngularJS framework. (For example from browser DOM events, setTimeout, XHR or third party libraries). Because we are calling into the AngularJS framework we need to perform proper scope life cycle of exception handling, executing watches.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply

There is also an $applyAsyc() method as well:

Schedule the invocation of $apply to occur at a later time. The actual time difference varies across browsers, but is typically around ~10 milliseconds.
This can be used to queue up multiple expressions which need to be evaluated in the same digest.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$applyAsync

I played around with your plnker and it looks like if you put scope.$apply(); at the end of your endDrag() function it then works as intended:

        function endDrag(evt) {
        if (selectedElement) {
            let selectedEntry = scope.data.templateData.find(function(entry) {
                return entry.name === selectedElement.getAttribute("data-entry-name");
            });

            if(selectedEntry){
                selectedEntry.x = parseInt(selectedElement.transform.baseVal.getItem(0).matrix.e / scope.data.pdfViwer.zoom);
                selectedEntry.y = parseInt(selectedElement.transform.baseVal.getItem(0).matrix.f / scope.data.pdfViwer.zoom);
            }
            selectedElement = null;
        }
        scope.$apply();
    }

The reason for this is that it appears as if your drag events aren't tied in to Angular's digest cycle, so you need to invoke it manually for Angular to act on the change.

Angular Js ng-model not updating variable in an inner function

Posting the answer so it can be marked:

Try using dot notation. Something like ng-model="socket.timeFreeze" and $scope.socket.timeFreeze. JB Nizet used a better naming convention so I'm gong to borrow from him:

In your controller:

$scope.time = {freeze: false };

In your view:

<input type="checkbox" ng-model="time.freeze">

Update ng-model of input after input's value changed with jquery unsuccessfully

Fixed ID and added jQuery's change() which is probably what you tried to do. Below you can find your code fixed. And here is how this is usually done with AngularJS alone: https://jsfiddle.net/rwtm1uh9/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<div data-ng-app="app">  <div data-ng-controller="myCtrl as ctrl">    <span>Value: {{ctrl.myValue}}</span>    <input id="myId" data-ng-model="ctrl.myValue" />    <button data-ng-click="ctrl.changeValue('ValueChanged')">Change Value</button>  </div>
  <script>    //my controller    angular.module('app', [])      .controller('myCtrl', function() {
        var vm = this;
        vm.wizard = {          changeValue: fnChangeValue        }
        return vm.wizard;
        function fnChangeValue(newValue) {          var e = $('#myId');          e.val(newValue);          e.change();        }      });  </script>
</div>

ng-model="telephone"

ng-model="$parent.telephone"

<ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4>
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content>

<!DOCTYPE html>
<html ng-app="routerApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//code.angularjs.org/1.4.8/angular.js"></script>
<script src="//rawgithub.com/g00fy-/angular-datepicker/1.0.3/dist/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script>

var routerApp = angular.module('routerApp', ['ui.router', 'ionic', 'ngCordova']);

routerApp.controller('RegisterCtrl', ['$scope', '$http', '$location', '$ionicLoading', '$ionicHistory','$cordovaNetwork', '$ionicModal', 
                                      function($scope, $http, $location, $ionicLoading, $ionicHistory,$cordovaNetwork, $ionicModal){
    $scope.telephone = "";

      $scope.sendPhoneNumber = function(){
          alert("--"+$scope.telephone);
        console.log($scope.telephone);
        /* $http.post(serverAddress+'/user/sendConfirmationSms', {telephone: $scope.telephone}).success(function(data){}) */
      }

    }]);

</script>
</head>
<body ng-controller="RegisterCtrl">
    <div class="modal">
        <ion-header-bar  class="actu_header">
      <h1 class="title">Nouvelles Infos</h1>
      <div class="button button-clear" style="width:50px" ng-click="cancel()"><span class="icon ion-chevron-down"></span></div>
    </ion-header-bar> 
     <ion-content  class="padding_header modalPhone">
    <h4> Entrez votre numéro de téléphone pour confirmer votre compte</h4> 
    <label class="item item-input">
      <span class="input-label"><i class="ion-ios-telephone"></i> </span>
      <input type="tel" ng-model="$parent.telephone" placeholder="Entrez votre numero de mobile"/>
    </label>
    <p class="err_container" ng-if="err">{{err}}</p>
    <button ng-click="sendPhoneNumber()" class="button homepage_button icon-right ">
      Valider
  </button>
  </ion-content> 
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/1.2.4/js/ionic.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-cordova/0.1.23-alpha/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
</body>
</html>