javascript - AngularJS: Two-way data binding not finding model in Controller -

• i writing directive used @ multiple places.
• the requirement controller using directives have own model budgetcategories.

my controller looks

function budgetcontroller($scope, budget, category) {         $scope.budgetcategories = []; } 

and directive looks

angular.module('categorylistingdirective', []).directive('categorylisting', function (category) {     return {         restrict: 'a',         replace: true,         require: true,         scope: {             budgetcategories: '='         },         templateurl: '../static/partials/categorylistingform.html',         link: function (scope, element, attrs) {             scope.recurring = true;             scope.allparentcategories = undefined;             scope.categories = category.query(function () {                 scope.allparentcategories = _.uniq(scope.categories, function (category) {                     return  category.parent;                 });                 console.log('all parent categories:', scope.allparentcategories);             });              scope.subcategories = function (parentcategoryname) {                 return _.filter(scope.categories, function (category) {                     return category.parent == parentcategoryname;                 });             };              scope.addbudgetcategory = function () {                 console.log('adding budgetcategory:', scope.amount);                 scope.budgetcategories.push({                     'amount': scope.amount,                     'category': scope.subcategory ? scope.subcategory.name : '',                     'parent_category': scope.parentcategory.parent,                     'recurring': scope.recurring                 });             };         }     } }); 

i want make sure budgetcategories controller used directive.

when error

typeerror: cannot read property 'push' of undefined     @ scope.scope.addbudgetcategory (http://localhost:5000/static/app/js/directives/categorylisting.js:28:39)     @ http://localhost:5000/static/app/lib/angular/angular.js:10672:29     @ http://localhost:5000/static/app/lib/angular/angular.js:18763:37     @ scope.$eval (http://localhost:5000/static/app/lib/angular/angular.js:12533:44)     @ scope.$apply (http://localhost:5000/static/app/lib/angular/angular.js:12631:41)     @ htmlbuttonelement.<anonymous> (http://localhost:5000/static/app/lib/angular/angular.js:18762:39)     @ htmlbuttonelement.x.event.dispatch (http://localhost:5000/static/app/lib/others/jquery-2.0.0.min.js:1321:108)     @ htmlbuttonelement.y.handle (http://localhost:5000/static/app/lib/others/jquery-2.0.0.min.js:1255:106)  

question

• what missing here?
• how can make sure budgetcatgories controller used directive

thank you

update

the html looks

<div class="budgetedit" category-listing="budget"> </div> 

this line...

scope: {     budgetcategories: '=' }, 

creates isolate scope directive, scope not inherit parent scope , therefore has no access budgetcategories. have few options...

1) don't create isolate scope removing scope: { ... } line directive definition.

2 ) pass budgetcategories directive...

<div class="budgetedit" category-listing="budget" budget-categories="budgetcategories"></div> 

3) use $parent access parent scope...

scope.$parent.budgetcategories.push({     'amount': scope.amount,     'category': scope.subcategory ? scope.subcategory.name : '',     'parent_category': scope.parentcategory.parent,     'recurring': scope.recurring });