Multiple Ng-controller Directives Using "controller As X" On The Same Element

Why isn't it possible in Angular to put two ng-controller directives on the same element and Which are the possible mitigation scenarios for this problem - like custom directives

Solution 1:

This can't be possible since ng-controller creates isolated scope for the current element. So this is not possible. So there can't be two isolated scope on a same element.

You need to change your code to:

<div ng-controller="ControllerOne as c1">
    <div ng-controller="ControllerTwo as c2">
        {{ c1.value }}, {{ c2.value }}
    </div>
</div>

Also its not valid to have same name attribute in any html tag.