Angularjs jQuery UI slider directive

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>AngularJS jQuery UI Slider directive</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.js"></script>
    <link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/redmond/jquery-ui.css" rel="stylesheet" />
    
    <link rel="stylesheet" href="style.css">
    <script>
      document.write('<base href="' + document.location + '" />');
    </script>
    <script src="app.js"></script>
  </head>
  
  <body ng-controller="MainCtrl">
  <h1>AngularJS Slider directive Data Binding</h1>
<h3 class="nomargin"><span ng-bind="sliderRanges.kms+' kms'"></span></h3>  
<div id="km-slider" class="slider" slider trigger="filterCars" config="milesSliderConfig" model="sliderRanges.kms"></div>
  </body>

</html>

// Inspired by climboid (https://github.com/climboid/angular-slider)

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
    $scope.sliderRanges = {};

        $scope.milesSliderConfig = {

            min: 1000,
            max: 100000,
            step: 10
        }

        $scope.sliderRanges.kms = 100000; //This should be max value
  
});


app.directive("slider", function() {
    return {
        restrict: 'A',
        scope: {
            config: "=config",
            model: "=model",
            trigger: '=trigger'
        },
        link: function(scope, elem, attrs) {

   
            $(elem).slider({
                range: "min",
                min: scope.config.min,
                max: scope.config.max,
                value: scope.model,
                step: scope.config.step,
                slide: function(event, ui) {
                    scope.$apply(function() {
                        scope.model = ui.value;
                    });
                    console.log(scope.model);
                    scope.$apply(scope.trigger);
                }
            });
        }
    }
});

/* CSS goes here */