// 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);
      });
    }
  }
}]);