<div id="wrapper" ng-app="MyApp">
  <div ng-controller="AppCtrl">
    
    <!-- Just a jQuery Plugin -->
    <h3>jQuery UI slider:</h3>
    <div id="slider"></div>
    <p>The slider's value is: <span id="slider-value">0</span></p>
    
    <!-- Trying to use a jQuery Plugin in an Angular Controller -->
    <h3>Angular slider without directive:</h3>
    <div id="ng-slider"></div>
    <p>The slider's value is: {{brokenSliderValue}}</p>
    
    <!-- A functioning jQuery Plugin in an Angular Directive -->
    <h3>Angular slider with one-way data bound:</h3>
    <div ng-slider-one model="mehSliderValue"></div>
    <p>The slider's value is: <input ng-model="mehSliderValue"/> (changing me won't update the slider)</p>
    
    <!-- A two-way data bound jQuery Plugin in an Angular Directive -->
    <h3>Angular slider with two-way data bound :</h3>
    <div ng-slider-two model="betterSliderValue"></div>
    <p>The slider's value is: <input ng-model="betterSliderValue"/> (changing me WILL update the slider)</p>

    
  </div>
</div>
#wrapper {
  padding: 6px 12px;
}
// Plain-ol' jQuery Plugin
$(document).ready(function() {
  $('#slider').slider({
    slide: function(event, ui) {
      $('#slider-value').text(ui.value);
    }
  });
});

var app = angular.module('MyApp', []);

app.controller('AppCtrl', ['$scope', function($scope) {
  
  $scope.brokenSliderValue = 0;
  $scope.mehSliderValue = 50;
  $scope.betterSliderValue = 50;
  
  $scope.repeatValueOne = 25;
  $scope.repeatValueTwo = 50;
  $scope.repeatValueThree = 75;
  $scope.repeatSliderValues = [
    $scope.repeatValueOne,
    $scope.repeatValueTwo,
    $scope.repeatValueThree
  ];
  
  // Broken slider
  $('#ng-slider').slider({
    slide: function(event, ui) {
      //$scope.$apply(function() {
        $scope.brokenSliderValue = ui.value;
      //});
    }
  });
  
}]);

// One-way bound slider
app.directive('ngSliderOne', [function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      var $slider = $(elem);
      $slider.slider({
        value: +scope.model,
        slide: function(event, ui) {
          scope.$apply(function() {
            scope.model = ui.value;
          });
        }
      });
    }
  };
}]);

// Two-way bound slider
app.directive('ngSliderTwo', [function() {
  return {
    restrict: 'A',
    scope: {
      'model': '='
    },
    link: function(scope, elem, attrs) {
      var $slider = $(elem);
      $slider.slider({
        value: +scope.model,
        slide: function (event, ui) {
          scope.$apply(function() {
            scope.model = ui.value;
          });
        }
      });
      scope.$watch('model', function(newVal) {
        $slider.slider('value', newVal);
      });
    }
  }
}]);

External CSS

  1. https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js