NgRepeat continue to recreate

Question

I created fiddle that mimic my problem. I use ng-repeatto create some nodes. But these nodes must be used by another library (Openlayers), which "move" ( appendChild) these nodes to another location in DOM.

So, the struggle for these nodes is taking place. Is there any way to say ngRepeatstop re-sorting, re-creation (not sure about the best term)?

http://jsfiddle.net/jonataswalker/dbxmbxu9/

Markup

<button ng-click="create()">New Record</button>
<div data-label="Created here">
  <div 
      id="hint-{{$index}}" 
      class="hint--always hint--right" 
      data-hint="{{row.desc}}"
      ng-repeat="row in rows track by row.id"
      on-render>{{row.desc}}
  </div>    
</div>
<div id="wrap" data-label="I'd like all to be here"></div>

Js

app.controller('ctrl', ['$scope', function($scope) {
  $scope.rows = [];
  $scope.count = 0;
  var wrap = document.getElementById('wrap');

  $scope.create = function(){
    var c = $scope.count++;
    $scope.rows.push({
      id: c,
      desc: 'dummy-desc-' + c
    });
  };

  $scope.move = function(div){
    wrap.appendChild(div);
  };
}]);
app.directive('onRender', ['$timeout', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function(){
            scope.move(element[0]);
        });
      }
    }
  };
}]);

Answer 1

In the end, I had to give up use ng-repeat. Thanks for all the comments.

, , $compile DOM.

http://jsfiddle.net/jonataswalker/y4j679jp/

app.controller('ctrl', ['$scope', function($scope) {
  $scope.rows = [];
  $scope.count = 0;
  var wrap = document.getElementById('wrap');

  $scope.move = function(div){
    wrap.appendChild(div);
  };
}]);
app.directive('button', ['$compile', function($compile){
  return {
    restrict: 'A',
    link: function(scope){
      var div = document.getElementById('c1');

      scope.create = function(){
        var c = scope.count++;
        var row = { id: 'hint-' + c, desc: 'any desc #' + c };
        var index = scope.rows.push(row) - 1;

        var html = [
          '<div id="'+row.id+'"',
          'class="hint--always hint--right"',
          'data-hint="{{rows['+index+'].desc}}"',
          'data-index="'+index+'"',
          'on-render>{{rows['+index+'].desc}}</div>'
        ].join(' ');

        angular.element(div).append($compile(html)(scope));
      };
    }
  };
}]);
app.directive('onRender', ['$timeout', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      $timeout(function(){
        scope.move(element[0]);
      }, 2000).then(function(){
        $timeout(function(){
          scope.rows[attr.index].desc = 'changed .... ' + attr.index;
        }, 2000);
      });
    }
  };
}]);