ionic framework - losing scope of ng-model when using ng-include (AngularJS) -

i creating android app using ionic , angularjs. in app used ng-include include html content in page.

checkbox.html:

<ul>         <li ng-repeat="opt in $parent.checkboxoptions">             <h4>                 <label><input type="checkbox" name="checkbox" ng-model="$parent.checkboxanswer" value="{{opt.option_value}}">{{opt.option_value}}</label>             </h4>         </li>  </ul> 

surveyctrl.js

$scope.checkboxoptions = params.questanswers; $scope.next = function(){     console.log($scope.checkboxanswer); } 

its showing undefined , thing when click on 1 checkbox selecting checkbox's also.

surveyctrls.js

 .directive('question', function ($compile) {     return {     restrict: 'a',     replace: true,     link: function (scope, ele, attrs) {       scope.$watch(attrs.question, function(queshtml) {         ele.html(queshtml);         $compile(ele.contents())(scope);        });     }   };   })   .directive('description', function ($compile) {      return {       restrict: 'a',       replace: true,       link: function (scope, ele, attrs) {         scope.$watch(attrs.description, function(deschtml) {           ele.html(deschtml);           $compile(ele.contents())(scope);           });       }     };   })   .directive('answers', function ($compile) {     return {     restrict: 'a',      replace: true,       link: function (scope, ele, attrs) {        scope.$watch(attrs.answers, function(answerhtml) {         ele.html(answerhtml);        $compile(ele.contents())(scope);      });    }   };  }) .controller('surveyload', function($scope){   var questtype  =  surveydata[questionindex].question_type;  var drawhtml = {                   'questiontext': 'some text',                    'questiondesc': 'some desc',                   'questanswers': [{                                       option_value: 'red',                                    }, {                                       option_value: 'blue',                                    }];,                   'scope'       : $scope                };    checkbox(drawhtml);  }  })    .controller('nextquest', function($scope){      $scope.questnext = function(){        console.log($scope);     }   });   function checkbox(params){     var $scope = params.scope;    $scope.queshtml = "<p>"+params.questiontext+"</p>";    $scope.deschtml = "<p>"+params.questiondesc+"</p>";     $scope.checkboxoptions = params.questanswers;    $scope.answerhtml = "<div ng-include src=\"'surveytemplate/checkbox.html'\"></div>"; } 

survey.html

<div class="row">             <div class="col question_div">                 <div class="qus_head">                     <p>question:  1/10</p>                 </div>                     <h4 class="para"><span question="queshtml"></span> </h4>                 <div class="qus_footer">                     <p>maxime quis.</p>                 </div>             </div>         </div>           <div answers="answerhtml">          </div>            <div class="row">             <div class="col button_div">                 <ul>                     <li><a href=""><img src="../img/next.png" style="width:70px;float:right" alt="next" ng-controller="nextquest" ng-click="questnext()"></a></li>                     <!-- <center><li><button style="align:center">stop</button></li></center> -->                     <li><a href=""><img src="../img/pre.png" style="width:70px;float:left" alt="previous" ></a></li>                 </ul>             </div>         </div> 

is there way value of checked checkboxes , prevent check other checkboxe's ?

using ng-includes create it's own scope. using controller as syntax can overcome issue. https://docs.angularjs.org/api/ng/directive/ngcontroller

<div id="ctrl-as-exmpl" ng-controller="controller ctrl">    ...     <li ng-repeat="opt in ctrl.checkboxoptions">         <h4>             <label><input type="checkbox" name="checkbox" ng-model="ctrl.checkboxanswer" value="{{opt.option_value}}">{{opt.option_value}}</label>         </h4>     </li>    ... </div> 

and in controller :

$scope.checkboxoptions = params.questanswers; 

becomes

this.checkboxoptions = params.questanswers; 

and on.

angularjs plunker syntax : https://plnkr.co/edit/db1cpowluxq9u8y558m1?p=preview

regards, eric