Angular.js Directive

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.css">
<div ng-app="santaApp" >
  <div id="delivery" ng-controller="santaAppCtrl">
    <h3 ng-click="click()">{{title}}</h3>
      <p>test</p>
    <div id="itemList">
        <div class="item" ng-repeat="d in destinations" >
            <disp-destination ></disp-destination>
        </div>
    </div>
  </div>
</div>

<script type="text/html" id="template">
    {{d.name}}:{{d.address}}
    <div class="complete" style="font-size:8px" range-select ></div>
</script>

CSS

body{
    font-family:'Segoe UI','Meiryo','メイリオ';
}
.item{
    width:250px;
    margin-bottom:20px;
}

JavaScript

//Model
var Destination = (function() {
    function Destination(name,address) {
        this.name = name;
        this.address = address;
        this.complete = Math.floor( Math.random() * 100 );
    }
    return Destination;
})();

//Controller
var santaApp = angular.module("santaApp",[]);
santaApp.controller("santaAppCtrl",function($scope){
    $scope.title  = "Santa Claus Delivery List";
    $scope.destinations = 
        [new Destination("Mike","NewYork"),
         new Destination("Bekky","Japan"),
         new Destination("Bob","Africa")];
    $scope.applyComplete = function(index,complete){
        $scope.destinations[index].complete = complete;
    }
})

//View
santaApp.directive("dispDestination",function(){
    return {
      restrict: 'E',
      template: $("#template").html()
    };
})
santaApp.directive("rangeSelect",function(){
    return function(scope, element, attrs){
        $(element[0]).slider({
              range: "min",
              value: scope.d.complete,
              min: 1,
              max: 100,
              slide: function( event, ui ) {
                  var index = $("#itemList .complete").index(this);
                  var scope = angular.element($("#delivery")).scope();
                  scope.applyComplete(index,ui.value);
              }
        });
    }
})