Getting the scope within Angular UI tabs

angular-ui, angularjs, scope, tabs

Solution

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

Problem

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?

Original source