Angular material, how to have sticky subheading in tabs

Question

I'm trying to make a subheading sticky inside a tab with angular material, but I can do it. I followed the examples on their site but still nothing, even if I insert the tabs name into a toolbar, I lost everthing Do u have any ideas?

Thank you

here's the code

<div ng-controller="ManagerController" ng-cloak>


  <md-content class="md-padding">



    <md-tabs md-dynamic-height md-border-bottom class="md-accent" md-selected="data.selectedIndex" md-align-tabs="{{data.bottom ? 'bottom' : 'top'}}">


    <!-- TAb for delibere creation -->
      <md-tab id="tab1">
        <md-tab-label><md-icon md-font-set="material-icons" >assignment</md-icon> {{data.firstLabel}} ({{get_delib()}})</md-tab-label>
        <md-tab-body>


            <section>
               <md-subheader class="md-warn">
                  <h2>Seleziona le persone/attività da inserire nella delibera</h2>
                <div ng-if="!selected">
                      <md-button class="md-raised md-primary" ng-click="select_all()">Seleziona tutto</md-button>
                      <md-button class="md-raised md-warn" ng-click="showAlert()">Crea Delibera</md-button>
                </div>
                <div ng-if="selected">
                <md-button class="md-raised md-primary" ng-click="select_all()">Deseleziona tutto</md-button>
                <md-button class="md-raised md-warn" ng-click="showAlert()">Crea Delibera</md-button>
                </div>


               </md-subheader>

                      <md-list-item ng-repeat="delib in delibs">
                        <p> {{ delib.name }} </p>
                        <md-checkbox class="md-secondary" ng-model="delib.wanted"></md-checkbox>
                      </md-list-item>
              </section> 

        </md-tab-body>
 <!-- end TAb for delibere creation -->


 <!-- TAb for sending mail -->

      </md-tab>
      <md-tab id="tab2">
        <md-tab-label><md-icon md-font-set="material-icons">assignment_late</md-icon> {{data.secondLabel}}({{get_conv()}})</md-tab-label>
        <md-tab-body>
          <section>
               <md-subheader class="md-warn md-sticky">
                  <h2>Seleziona le persone/attività di cui si è inviata la convenzione<md-button class="md-raised md-primary">Aggiorna</md-button></h2>   
               </md-subheader>

                      <md-list-item ng-repeat="inv in invs">
                        <p> {{ inv.name }} </p>
                        <md-checkbox class="md-secondary" ng-model="inv.wanted"></md-checkbox>
                      </md-list-item>
              </section> 
        </md-tab-body>
      </md-tab>
 <!-- end TAb for sending mail -->


  <!-- TAb for received mail -->

      <md-tab id="tab3">
        <md-tab-label><md-icon md-font-set="material-icons">assignment_turned_in</md-icon> {{data.thirdLabel}}({{get_ric()}})</md-tab-label>
        <md-tab-body>
          <section>
               <md-subheader class="md-warn md-sticky">
                  <h2>Seleziona le convenzioni ricevute <md-button class="md-raised md-primary">Aggiorna</md-button></h2>   
               </md-subheader>

                      <md-list-item ng-repeat="ric in rics">
                        <p> {{ ric.name }} </p>
                        <md-checkbox class="md-secondary" ng-model="ric.wanted"></md-checkbox>
                      </md-list-item>
              </section> 
        </md-tab-body>
      </md-tab>
  <!-- end TAb for received mail -->

    </md-tabs>
  </md-content>
</div>    

Answer 1

maybe you can try with $mdSticky service, there is a directive example in official documentation

angular.module('myModule')
  .directive('stickyText', function($mdSticky, $compile) {
    return {
      restrict: 'E',
      template: '<span>Sticky Text</span>',
      link: function(scope,element) {
        $mdSticky(scope, element);
      }
    };
  });

tutorial: https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky