AngularJS : How to call methods from “Different Controllers” via single <ul> element?

Question

We have a team working together. And then the main app.js (like below) is given by another team. (Meaning: I don't have control on it. So i can't change it's existing structure.) The App is something like:

app
.value('settings', {
    hostUrl: "//example.com",
    endpoint:'/api/events/',
})
.controller('UserCtrl', ['$scope', function($scope){
    $scope.initUser = function(e){
        console.log("User stuffs..");
    }
}])
.controller('EventCtrl', ['$scope', function($scope){
    $scope.initEvent = function(e){
        console.log("Event stuffs..");
    }
}])

( This is not the real one, but just a sample skeleton)

Here's my part below. I NEED TO call two methods (in two controllers) above within a single <ul><li> element, respectively:

<ul>
    <li>User</li>
    <li>Event</li>
</ul>

But:
What i understand (what i can do) so far is, something like:

<ul ng-controller="UserCtrl">
    <li ng-click="initUser();">User</li>
</ul>
<ul ng-controller="EventCtrl">
    <li ng-click="initEvent();">Event</li>
</ul>

How can i make this calls in single <ul> list please? Like in:

<ul>
    <li>User</li>
    <li>Event</li>
</ul>

Thanks everyone for helping out :)

Answer 1

需要跨控制器边界工作的任何数据或功能都应作为服务实现。

Answer 2

Did you try this?

<ul>
    <li ng-controller="UserCtrl" ng-click="initUser();">User</li>
    <li ng-controller="EventCtrl" ng-click="initEvent();">Event</li>
</ul>