md-tabs: scope inside tabs is not the same as outside

[gpothier]

It seems the md-tabs tag establishes a new scope. Consider this html example:

Data: {{ data }}
<md-tabs flex md-border-bottom md-selected="selectedTab" >

    <md-tab label="A">
        <md-tab-body class="md-padding">
            Data: {{ data }}
            <md-button ng-click="data = 'bye'">Bye</md-button>
        </md-tab-body>
    </md-tab>

    <md-tab label="B">
    </md-tab>
</md-tabs>

The "data" scope attribute can have an initial value:

angular.module("docflow").controller("BooksListCtrl", 
["$scope", "$rootScope", 
function($scope, $rootScope){
    $scope.data = "hello";
}]);

When the page is loaded, the initial value is displayed both inside and outside the tab. However, when clicking the button that changes the value, the new value appears only inside the tab; outside the tab it remains unchanged.

This violates the principle of least astonishment IMHO.

Please see this example Meteor app:

https://github.com/gpothier/mdTabIssues

[jeroenvheel]

i have the same problem i'm creating a form with tabs on the scope is a user object but there's no data present when i submit.

angular.module('mywhoopmodule').controller('whoopwhoop', whoopwhoop)
whoopwhoop.$inject = ['$scope'];
function whoopwhoop($scope){
   $scope.user = {};
}

and my html

<div ng-controller="whoopwhoop">
<form name="createUser" id="createUser" role="form">
            <md-tabs md-dynamic-height md-stretch-tabs md-center-tabs>

                <md-tab label="Gebruiker">

                    <md-input-container>
                        <label>Name</label>
                        <input id="name" name="name" type="text" md-maxlength="50" required
                               ng-model="user.Name" />
                    </md-input-container>

                    <md-input-container>
                        <label>Description</label>
                        <input id="description" name="description" type="text" md-maxlength="250"
                               ng-model="user.Description" />
                    </md-input-container>

                    <md-input-container>
                        <label>E-mail</label>
                        <input id="email" name="email" type="email" md-maxlength="255" required
                               ng-model="user.Email" />
                    </md-input-container>

                    <md-input-container>
                        <label>Password</label>
                        <input id="password" name="password" type="password" md-maxlength="255" required
                               ng-model="user.Password" />
                    </md-input-container>

                    <md-select name="maincompany" placeholder="Hoofd Bedrijf" ng-model="user.MainCompany" required>
                        <md-option ng-repeat="company in companyList" value="{{company.Name}}">{{company.Name}}</md-option>
                    </md-select>

                </md-tab>
                <md-tab label="Rechten">
                    <md-switch ng-model="user.ManageCompanies" aria-label="ManageCompanies?" ng-disabled="!currentUser.ManageCompanies">
                        Company Beheer
                    </md-switch>
                    <md-switch ng-model="user.ManageProjects" aria-label="ManageProjects?">
                        Projecten Beheer
                    </md-switch>
                    <md-switch ng-model="user.ManageUsers" aria-label="ManageUsers?">
                        Gebruiker Beheer
                    </md-switch>

                </md-tab>

            </md-tabs>
        </form>
</div>

[luclanet]

I still had the same problem even with rc5.

[blockjon]

Same problem here.. cant figure out how to do data binding to input elements inside a tab.

[bonatoc]

@blockjon - I am able to data binding inside a tab. Are your tabs in a controller?

[manish2535]

I am getting this same issue and I am on RC 1.0.5

[and1gio]

i have same problem... i'm using tabs in dialog and can't bind variable to scope from md-tab content

[wilker7ribeiro]

+1