Inserting ng-repeat into DOM on-click and having it render

Question

I am trying to insert an ng-repeat into the DOM and then have it render based on an array I am passing to $scope for the view's controller

Controller:

angular.module('myApp')
.controller('LookBookCtrl', ['$scope','$document','lookbookFactory','$timeout', function ($scope, $document, lookbookFactory, $timeout)  {
    lookbookFactory.getAllLookbooks()
        .then(function(){
            // $scope.lookbooks = lookbookFactory.lookbooks.data;
            // console.log($scope.lookbooks);
            var range = [];
            for(var i=0;i<42;i++) {
                range.push(i);
            }
            $scope.range = range;
        })

    var lookItems = [];
    $scope.lookItems = [];
    $scope.$watch('lookItems', function() {
        console.log("a look was added! " + $scope.lookItems);
    });
    $scope.getLookItems = function(id, element) {
        lookbookFactory.getLookItems(id)
            .then(function(response) {
                lookItems = response.data.items;
                $scope.callbackTrue = true;
                moveLook(id, element);
        });
    }
    var moveLook = function(id, element) {
        var button = element.target;
        var parent = $(button).parent();
        var index = $(button).data('index');
        if (index == 0) {
            var next = index + 1;
            var toMove = $('.each-look').get(next);
            $(toMove).addClass('move-right');
            insertItemScroll(parent, 'right');
        } else if (isOdd(index)) {
            var prev = index - 1;
            var toMove = $('.each-look').get(prev);
            $(toMove).addClass('move-left');
            insertItemScroll(parent, 'left');
        } else {
            var next = index + 1;
            var toMove = $('.each-look').get(next);
            $(toMove).addClass('move-right');
            insertItemScroll(parent, 'right');
        }
    }
    var insertItemScroll = function(parent, side) {
        var height = parent.height();
        $('.each-look').css('height', height);
        var element =   '<div class="item-scroll">' +
                            '<ul>' +
                                '<a ng-repeat="item in lookItems" href="/product/Name"><li><img src="img/{{item}}PF1.png"></li></a>' +
                            '</ul>' +
                        '</div>';
        element = $.parseHTML(element);
        if (side == 'right') {
            parent.after(element);
        } else {
            parent.before(element);
        }
        $timeout(function() {
            lookItems.map(function(item) {
                console.log(item);
                $scope.lookItems.push(item);
            });
            console.log($scope.lookItems);
        }, 3000);
    }
    var isOdd = function(x) {
        return x & 1;
    }
}]);

The lookbookFactory.getLookItems(id) method is an AJAX call to pull the item ids for the look that was clicked on.

After that I am using Jquery to manipulate the DOM and replace the look on whichever side with a scroll of the products in that look.

I can see that $scope.lookItems is being updated and I am even using a $timeout to ensure that the HTML has been rendered and then updating $scope.lookItems.

Does this need to be done via a directive to ensure that the markup being inserted is in scope of the view upon rendering?

I am pretty new to Angular so I am not sure if this process can be done without inserting HTML via Jquery.