I am currently facing an issue with my app that has 3 tabs, each loading its own template from an external file. The problem I am encountering is that the ng-model data from the first tab is not being transferred to the third tab.
Here is the content from the first file:
<div class="row">
<div class="span2 text-right">*Reported By:</div>
<div class="span2"><input type="text" ng-model="date" required></div>
<div class="span2 text-right">*Well Number:</div>
<div class="span2">
<select ng-model="well" required ng-change="wellFunc(well)" required>
<option ng-selected>Well-01</option>
<option>Well-02</option>
<option>Well-03</option>
</select>
</div>
</div>
And here is the content from the second file:
<table class="table table-hover table-striped">
<tr>
<th><strong>General Information:</strong></th>
</tr>
<tr>
<td ng-model="date"></td>
</tr>
</table>
I suspect that the issue may be related to using ui-router. Here is the configuration code for myApp:
var myApp = angular.module('myApp', ["ui.router"])
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/re");
$stateProvider
.state('re', {
url: "/re",
templateUrl: "template/general.html"
})
.state('ro', {
url: "/ro",
templateUrl: "template/corrective.html"
})
.state('ri', {
url: "/ri",
templateUrl: "template/result.html"
})
});