title: Why ID of an element is changing after adding directive
body: <p>I have number of divs getting created using <code>ng-repeat</code>. ID of those divs are assigned like this</p>
  
  <pre><code>id={{""+date.getDate()+"-"+date.getMonth()+"-"+date.getFullYear()+"-"+time+":00"}}
  </code></pre>
  
  <p>So ID of a div becomes like this <code>id="10-0-2014-00:00"</code></p>
  
  <p>but when i add <code>droppable</code>(custome directive) in div, ID becomes this <code>id="---:30"</code>. what might be the issue? is there any solution to avoid this issue? </p>
  
  <p>droppable directive-</p>
  
  <pre><code>app.directive('droppable', function() {
    return {
      scope: {
        drop: '&amp;',
        bin: '='
      },
      link: function(scope, element) {
        // again we need the native object
        var el = element[0];
  
        el.addEventListener(
          'dragover',
          function(e) {
            e.dataTransfer.dropEffect = 'move';
            // allows us to drop
            if (e.preventDefault) e.preventDefault();
            return false;
          },
          false
        );
  
        el.addEventListener(
          'dragenter',
          function(e) {
  
            return false;
          },
          false
        );
  
        el.addEventListener(
          'dragleave',
          function(e) {
  
            return false;
          },
          false
        );
  
        el.addEventListener(
          'drop',
          function(e) {
            // Stops some browsers from redirecting.
            if (e.stopPropagation) e.stopPropagation();
  
  
            var binId = this.id;
            console.log(this)
            var item = document.getElementById(e.dataTransfer.getData('Text'));
            console.log(item)
            //this.appendChild(item);
            // call the passed drop function
            scope.$apply(function(scope) {
              var fn = scope.drop();
              if ('undefined' !== typeof fn) {            
                fn(item.id, binId);
              }
            });
  
            return false;
          },
          false
        );
      }
    }
  });
  </code></pre>