AngularJS - How to deal with ng-repeat with pre-exist items

Question

I am trying to use ng-repeat for a list., but I want to have pre-existing list items that is rendered with Django.

Note: I have set {[{ }]} as my AngularJS InterpolateProvider.

HTML sample

<ul ng-controller="ListController">
    {% for item in existing_list %}
        <li>
            <span>{{item.firstName}}</span>
            <span>{{item.lastName}}</span>
        </li>
    {% endfor %}

    <li ng-repeat="item in items">
        <span>{[{item.firstName}]}</span>
        <span>{[{item.lastName}]}</span>
    </li>
</ul>

Now, I want to handle these items using ng-controller

app.js

function ListController($scope){
    $scope.items = [{firstName: "Bob", lastName: "Smith"}];
}

My question is, how can I add the pre-existing list items generated by Django to be joined with $scope.items?

Answer 1

The way how I am doing now is using ngInit to inject existing data to scope. So you'll have kind of:

<ul ng-controller="ListController" ng-init='items = {% existing_list.toJSON() %}'>

(sorry, I don't know how to serialize object to JSON)