javascript - Unable to access scope variable inside a controller in Angular -

i have problem code. in app have 2 controllers 1 load data , second display tab.

here's setup:

<div class="row" ng-app="quotation_list">     <div class="col-md-12" ng-controller="quotelist">         <section ng-controller="panelcontroller panel">             <div class="panel pane-default" ng-show="panel.isselected(1)">               ...               <div class="row">                         <div class="form-group">                             <label>vat(%): </label>                             <input type="number" class="form-control text-right" ng-model="vat_rate" />                         </div>                     </div>               <button class="btn btn-default" type="button" ng-click="computepercentage()">test value</button>            </div>         </section>     </div> </div> 

and trying value of model vat_rate got undefined value

here's function that:

var quotationlist = angular.module('quotation_list', ['jsonformatter','ui.bootstrap','ckeditor']);      quotationlist.controller('quotelist', function($scope, $http) {      //some codes ...     $scope.computepercentage = function() {         console.log($scope.vat_rate);     }  }); 

i don't know where's error. , 1 more question fine if create controller inside controller? did?

ok that's hope can me. :)

as pointed out in comments, mixing styles here, making difficult access property in correct scope. also, because property primitive value without prior assignment, , not object, subject javascript prototype inheritance issues.

here how recommend refactoring outer controller make use of controller as, simplify controller somewhat, , make plainly obvious controller properties belong to. has added side benefit of automatically enforcing "dot rule" regard prototype inheritance.

var quotationlist = angular.module('quotation_list',                             ['jsonformatter','ui.bootstrap','ckeditor']);      quotationlist.controller('quotelistcontroller', function($http) {      var quotelist = this; //store reference easy use      //some codes ...      quotelist.computepercentage = function() {         console.log(quotelist.vat_rate);     }     }); 

and html:

<div class="row" ng-app="quotation_list">     <div class="col-md-12" ng-controller="quotelistcontroller quotelist">         <section ng-controller="panelcontroller panel">             <div class="panel pane-default" ng-show="panel.isselected(1)">               ...               <div class="row">                   <div class="form-group">                       <label>vat(%): </label>                       <input type="number" class="form-control text-right" ng-model="quotelist.vat_rate" />                   </div>               </div>               <button class="btn btn-default" type="button" ng-click="quotelist.computepercentage()">test value</button>            </div>         </section>     </div> </div>