Problems with ng-model

Question

I have an app with 3 tabs every tabs load own template from external file. Problems that ng-model from first tab do not send to third tab.

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>

Second:

<table class="table table-hover table-striped">
  <tr>
    <th><strong>General Information:</strong></th>
  </tr>
  <tr>
    <td  ng-model="date"></td>
  </tr>
</table>

Also I use ui-router, maybe problem in router?

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"
})

});

Answer 1

I would need to see your controller to confirm, but you are likely clobbering your date. In your controller, I am assuming you have something like

$scope.date = "03/11/2014";

Instead, do something like this

$scope.foo = { "date":"03/11/2014"}

and update your html to

<input type="text" ng-model="foo.date" required>

Now when the user updates the input, it won't clobber the other "date" reference, but instead just update the date property of the foo reference. Checkout this quick video for an explanation. https://egghead.io/lessons/angularjs-the-dot