Getting the scope within Angular UI tabs

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?

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