angualrjs How to clone image with same position using .push?

Question

I'm trying to create a copy of image on keypress. The problem is when I .push the copy to my array of object to change css left top position doesn't work. I think the ng-repeat is still loading the html. Is there a way to have promise or something else to make copy of image, and change the css after ng-repeat add my new object?

  $scope.changed = function (keyevent, item, id) {
    keyevent.preventDefault();
   switch (keyevent.keyCode) {
        case 68:
            if (keyevent.ctrlKey) {
                left = $('#' + id).css("left").slice(0, -2);
                top = $('#' + id).css("top").slice(0, -2);

                item.duplicate = true;
                item = angular.copy(item);
                itemId = $scope.items.push(item);
                imagePosition(itemId  - 1, left, top);
            }
            break;
    }

}
function imagePosition(id, left, top) {
    $("#" + id).css({left: left, top: top});
}

Answer 1

To solve my problem I used ng-style="getStyle($index,item)" and I call a function. Any time I push new object to the array, ng repeat call the getStyle. My object have some properies to my css style.

<div style="margin-left: 20px;"  ng-repeat="item in template.list2">


    <img  ng-click="setBorder($index,true)"   ng-focus="setBorder($index,true)" ng-blur="setBorder($index,false)"
          ng-style="<%getStyle($index,item)%>" id="<%$index%>" ng-keydown="changed($event,item,$index,this)" tabindex="<%$index%>" ng-show="item.link"
          src="<% item.link %>"
          data-drag="<%item.drag%>"
          data-jqyoui-options="{revert: 'invalid',snap:true,snapTolerance:15,zIndex:999,snapMode:'inner'}"
          ng-model="template.list2"
          jqyoui-draggable="{index: <%$index%>,placeholder:true,animate:true}"/>
</div>




    $scope.changed = function (keyevent, item, id) {
        keyevent.preventDefault();
        switch (keyevent.keyCode) {
            case 68:
                if (keyevent.ctrlKey) {
                    left = parseInt($('#' + id).css("left").slice(0, -2));
                    top =  parseInt($('#' + id).css("top").slice(0, -2));
                    item.left = left;
                    item.top = top;
                    item.duplicate = true;
                    item = angular.copy(item);
                    $scope.template.list2.push(item);

                    Notification.success("Imagem duplicada com sucesso!");

                }
                break;
        }

        $scope.getStyle = function (index, item) {
            if(item.duplicate)
            {
                var top = item.top + 20;
                var left =  item.left +20;
                var css = {
                    "position":'absolute',
                    "left":+  left + 'px',
                    "top":  + top + 'px',
                    "height": item.height + 'px',
                    "width": item.width + 'px',
                    'z-index': 999
                };
            }else{
                var css = {
                    "float": 'left',
                    "left": (item.width * index + 5) + "px",
                    "position":'absolute',
                    "height": item.height,
                    "width": item.width,
                    "display": 'inline-block'
                };
            }

            return css;
        }

    }