html - HTML 5 で 1 つのコントローラーを別のコントローラーとマージする方法

Question

HTML5初心者です。私は2つの異なるコントローラーを持っています。別に問題なく動いています。マージしようとすると、機能しません。コントローラーでコントローラーを構成するにはどうすればよいですか。

コード：

<div ng-controller="AppController">
// Read XML Tag and Display
<ul>
<li ng-repeat="image in dataSet">
//Loop
 <h2>{{image.title}}</h2>
 <div ng-controller="MainController">
 //Videogular - to play a video
 </div>
</li>
</ul>
<div>

ここでは両方とも個別に動作しています。しかし、XML Display Controller で videogular を表示しようとすると、どちらも機能しません。

Videogular コントローラーのコード:

 //Controllers
 var videogularApp = angular.module("videogularApp",
[
    "com.2fdevs.videogular",
    "com.2fdevs.videogular.plugins.controlbar",
    "com.2fdevs.videogular.plugins.overlayplay",
    "com.2fdevs.videogular.plugins.buffering",
    "com.2fdevs.videogular.plugins.poster"
]
);


var controllerModule = angular.module('controllers', []);
controllerModule.controller("MainController", ["$scope", function (scope) {
scope.data = {
    "width": 300,
    "height": 264,
    "autoHide": false,
    "autoPlay": false,
    "themes": [
        {label: "Default", url: "themes/default/videogular.css"},
        {label: "Solid", url: "themes/solid/solid.css"}
    ],
    "stretchModes": [
        {label: "None", value: "none"},
        {label: "Fit", value: "fit"},
        {label: "Fill", value: "fill"}
    ],
    "plugins": {
        "poster": {
            "url": "assets/images/oceans-clip.png"
        }
    }
};

scope.theme = scope.data.themes[0];
scope.stretchMode = scope.data.stretchModes[1];
}]);

XML コントローラーのコード

angular.module('myApp.service',[]).
factory('DataSource', ['$http',function($http){
   return {
       get: function(file,callback,transform){
            $http.get(
                file,
                {transformResponse:transform}
            ).
            success(function(data, status) {
                console.log("Request succeeded");
                callback(data);
            }).
            error(function(data, status) {
                console.log("Request failed " + status);
            });
       }
   };
}]);
angular.module('myApp',['myApp.service']);

var AppController = function($scope,DataSource) {

var SOURCE_FILE = "download.xml";

xmlTransform = function (data) {
    console.log("transform data");
    var x2js = new X2JS();
    var json = x2js.xml_str2json(data);
    return json.rss.channel.item;
};

setData = function (data) {
    $scope.dataSet = data;
};

DataSource.get(SOURCE_FILE, setData, xmlTransform);

};