Just use
slider.update()inside your directive and you will be fine:
var app = angular.module('myApp', []);app.controller('MainCtrl', function ($scope, $rootScope, $timeout) { $scope.someNumber = 15; $scope.apply = false;}).directive('ionRangeSlider', function ionRangeSlider() { return { restrict: 'A', scope: { rangeOptions: '=', model: '=ngModel', apply: '=apply' }, link: function (scope, elem, attrs) { elem.ionRangeSlider(scope.rangeOptions); scope.$watch('apply',function () { if (scope.apply) { scope.apply = false; var slider = elem.data("ionRangeSlider"); slider.update({ from: scope.model }); } }); } }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/js/ion.rangeSlider.js"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.min.css" /><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.6/css/ion.rangeSlider.skinFlat.min.css" /><div ng-app="myApp" ng-controller="MainCtrl" > <h3>Text input updates slider and vice-versa.</h3> <input ion-range-slider ng-model="someNumber" apply="apply" range-options="{min: -100, max: 100, step: .001}"> <br/> <input type="text" ng-model="someNumber" ng-change="apply = true"></div>
