Getting the scope within Angular UI tabs

Question

I'm having some trouble with angular scopes within the context of a tab (Angular UI).

Here is my jsfiddle example (slimmed down example showing fields on multiple tabs with a single submit button outside of the tabs).

Here is the basic html layout:

<form...>
  <tab>
    <pane>
      <input...>
    </pane>
  </tab>
</form>

Looking at the jsfiddle example, without the tabs if I submit a very basic form I would see the $scope.user be an object. Since the fields are within panes (tabs) the scope is incorrect. How can I get access to the submitted user object in createUser?

Answer 1

The problem is that the user model is buried deep within an isolate scope. To get the code working as expected, you would need to alert out the value of $scope.$$childHead.panes[0].$$nextSibling.user.first_name not $scope.user. This is obviously not a solution.

A simple solution is to add an empty user object to the controller scope. The ng-model directives in your HTML will then bind to this property. Your controller should look like this:

function MyCtrl($scope) {
  $scope.user = {};
  $scope.createUser = function () {
    alert($scope.user);
  };
}