I am facing problem in making two way binding to a form model inside the tabs which is under ng-if condition.
Plunker link to my problem is
http://plnkr.co/edit/F5h8eCu7IlXlwi1XhdV7?p=preview
I have tried all ways possible but the scope variables aren't recognized under the tabset. The scope variables are accessed in "ng-if" part using the $parent reference but for some reason the tab set doesnt recognize any of these value . any help or hint will be helpful
The code is as follows
// Code goes here
var app =angular.module('textModule',['ui.bootstrap']);
app.controller('checktest',function($scope){
$scope.step= 0;
$scope.configFormData = "angular test";
$scope.configFormData2 = "angular test 2";
});<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script data-require="angular-ui-bootstrap@*" data-semver="0.12.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="textModule">
<div ng-controller="checktest">
<div ng-form="configForm">
<div class="general" ng-if="step == 0">
{{$parent.configFormData}} <br />
{{$parent.configFormData2}}
<tabset class="nav nav-tabs">
<tab>
<tab-heading>tab 1</tab-heading>
<div role="tabpanel" class="tab-pane active" id="network" aria-labelledby="network-tab">
{{$parent.configFormData}}
<input type="text" ng-model="$parent.configFormData" />
</div>
</tab>
<tab>
<tab-heading>tab 2 </tab-heading>
<div role="tabpanel" class="tab-pane" id="region" aria-labelledby="region-tab">
<input type="text" ng-model="$parent.configFormData2" />
</div>
</tab>
</tabset>
</div>
</div>
</div>
</body>
</html>
In Angular inheritance of scope variables works with objects only, not with direct scope properties.
https://github.com/angular/angular.js/wiki/Understanding-Scopes
Try using some data object and bind to the object:
By the way: You don't need the $parent in your case.