Nested Controller with ng-click in angular js

Question

I have an Item controller and User controller can apply to it.So I have created Apply controller to do this but the problem is that I have Item view page from there I have to pass item id to my Apply controller's apply method.

My Page

<div class="container_12" ng-controller="ItemCtrl" ng-init="profile()">
    <div class="gallery" >
        <ul class="unstyled">
            <h1>{{item.name}}</h1>
            <br>
                <ul>
                    <li>About: {{item.description}}</li>
                </ul>
            </ul>
            <br>
                <div  ng-controller="ApplyCtrl">
                    <button ng-click="apply(item._id)">Show Interest</button>
                </div>
            </div>
        </div>

So I want nested ng-controller because I want the item id to pass but for this my console shows error.

Error: [ng:areq] http://errors.angularjs.org/1.4.8/ng/areq?p0=ApplyCtrl&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://localhost:8080/vendor/angular/angular.min.js:6:416
    at qb (http://localhost:8080/vendor/angular/angular.min.js:22:131)
    at Qa (http://localhost:8080/vendor/angular/angular.min.js:22:218)
    at http://localhost:8080/vendor/angular/angular.min.js:80:210
    at w (http://localhost:8080/vendor/angular/angular.min.js:60:177)
    at D (http://localhost:8080/vendor/angular/angular.min.js:61:30)
    at g (http://localhost:8080/vendor/angular/angular.min.js:55:105)
    at g (http://localhost:8080/vendor/angular/angular.min.js:55:122)
    at D (http://localhost:8080/vendor/angular/angular.min.js:62:134)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292r.$apply @ angular.js:16157(anonymous function) @ angular.js:1679e @ angular.js:4523c @ angular.js:1677yc @ angular.js:1697Zd @ angular.js:1591(anonymous function) @ angular.js:29013c @ jquery.js:3p.fireWith @ jquery.js:3x.extend.ready @ jquery.js:3q @ jquery.js:3 

Is there any way I can achieve this?

Answer 1

Short Term - Based on the console error, it appears ApplyCtrl isn't even recognized by your AngularJS - I would confirm the javascript file that instantiates your ApplyCtrl is being loaded.

Long Term - What you are essentially trying to achieve is a nested view - I highly recommend looking at UI Router , which will handle exactly what you are trying to achieve.