title: jQuery's draggable() and angular's ng-repeat
body: <p>I have the following code.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-repeat="item in canvasElements" id="declareContainer"&gt;
     {{item}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript (Angular)</p>
  
  <pre><code>(function(){
  
    //angular module
    var dataElements = angular.module('dataElements', ['angularTreeview','ngResource']);
  
    //test controller
    dataElements.controller('myController', function($scope,$resource){
  
      $scope.nodeClicked = function(node){
        alert(node.roleName);
      }
  
      $scope.canvasElements = ['item1', 'item2', 'item3'];
  
    });
  
  })();
  </code></pre>
  
  <p>Javascript (jQuery)</p>
  
  <pre><code>$("#declareContainer").draggable({curosr: "move"});
  </code></pre>
  
  <p>The HTML that this generates on the page creates a div for each item in the array so you get something like this:</p>
  
  <pre><code>&lt;div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable"&gt;
    item1
  &lt;/div&gt;
  
  &lt;div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable"&gt;
    item2
  &lt;/div&gt;
  
  &lt;div ng-repeat="item in canvasElements" id="declareContainer" class="ng-scope ng-binding ui-draggable"&gt;
    item3
  &lt;/div&gt;
  </code></pre>
  
  <p>But only the first one is draggable. How would I make it so each individual div that gets generated can be draggable?</p>