Angular.js After Render

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="curlingApp" >
  <div id="curling-field" ng-controller="curlingAppCtrl">
    {{title}}
    <button ng-click="addStone($event)" >Add Stone</button>
    <div id="field">
        <!-- directive "displayStone"->"display-stone"　-->
        <div class="stone" ng-repeat="s in stones" displayStone></div>
    </div>
    <div id="goal"></div>
  </div>
</div>

CSS

#field{
    width:250px;
    height:330px;   
    background-color:ghostwhite;
}
#goal{
    width:250px;
    height:70px;
    background-color:palegreen;
}
#goal.stone-in{
    background-color:springgreen;
    
}

.stone{
    width:30px;
    height:30px;
    background-color:peachpuff;
    margin:10px;
    border-radius:15px;
}

JavaScript

//Model
var Stone = (function() {
    function Stone(num) { 
        this.num = num;
    }
    return Stone;
})();

//Controller
var curlingApp = angular.module("curlingApp",[]);
curlingApp.controller("curlingAppCtrl",function($scope){
    $scope.title  = "Curling Competition";
    $scope.stones = [];
    $scope.addStone = function($event){
        var index = $scope.stones.length;
        $scope.stones.push(new Stone(index))    
    }
})

//View
curlingApp.directive("displayStone",function(){
    return function(scope, element, attrs){
        //scope=local scope , element is dom and attrs is attributes of it.
        $(element[0]).draggable();    
    }
})

//onLoad
$(function(){
    $("#goal").droppable({
        drop:function(event,ui){
            target = $(this).addClass("stone-in");
            setTimeout(function(){
                target.removeClass("stone-in");
            },1000)            
        }
    })
})