Угловой JS и встроенное редактирование данных из REST

Question

Я очень новичок в угловой.

Я читаю ответ JSONP и показываю его на странице. я хотел бы позволить пользователям редактировать части текста в строке. я нашел угловой-xeditable. но я не могу понять, 1. как я могу использовать его в ретрансляторе. Я провел несколько часов, пытаясь использовать встроенное редактирование. это работает, если его нет в репитере. иначе все ломается.

у меня есть это:

в моем app.js:

var app = angular.module('ListApp', ['ui.bootstrap']).config(['$httpProvider', function ($httpProvider)
{
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);;

var app11 = angular.module("app11", ["xeditable"]);

app11.run(function (editableOptions) {
    editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});

app11.controller('Ctrl', function ($scope) {
    $scope.user = {
        name: 'awesome user'
    };
});



angular.element(document).ready(function () {
    angular.bootstrap(document.getElementById('list-reminders'), ['ListApp']);
    angular.bootstrap(document.getElementById('xedittxt'), ['app11']);
});

в моем HTML:

<div id="list-reminders" class="container main-frame" ng-controller="remindersController" ng-init="init()">
            <div class="search-box row-fluid form-inline">
                <nobr>
                    <label>Find</label>&nbsp;
                    <input type="text" ng-model="searchText" value="{{searchText}}" />&nbsp;<input type="submit" class="submit" ng-click="getRemindersByUserId()" value="Search">
                </nobr>
            </div>

            <div class="results-top"></div>
            <div class="results-container">
                <div class="row-fluid">                   
                    <div class="span1">Title</div>
                    <div class="span2">My Notes</div>          

                </div>
                <ul class="item-list" style="display:none;">

                    <li ng-repeat="(key,item) in lists">
                        <div class=" row-fluid">

                            <div id="xedittxt" ng-controller="Ctrl" class="span2">
                                <a href="" editable-text="{{item.user_reminder_title}}"></a>
                            </div>                            
                            <div class="span2">{{item.user_notes}} </div>

                        </div>
                    </li>
                </ul>

в моем controller.js

app.controller("remindersController", function ($scope, $modal, $http) {

    $scope.items = [];
    //api

    $scope.getListApi = '....URL REMOVED';
    var callback = 'callback=JSON_CALLBACK';

    $scope.init = function () {

        //items selected from results to add to list
        $scope.selectedItems = [];

        var $loading = $('.loading');
        var $searchOptions = $('.search-options');
        var $itemList = $('.item-list');

        $scope.getRemindersByUserId = function (userId) {
            $itemList.hide();
            $loading.show();

            var getListUrl = $scope.getListApi + "1&" + callback;

            console.log(getListUrl);

            $http.jsonp(getListUrl).success(function (data) {

                $scope.lists = data;
                $loading.hide();
                $itemList.show();

            }).error(function (err) {
                console.log("getRemindersByUserId error: " + err);
            });

        };

    };

});