Tabset $rootScope scope not updating

Question

I\'ve a screen in below structure.

UserExperienceScreen
       
       tab 1 -  
 - input fields - form submit - go to         


        

Answer 1

It is not advisable to pollute the $rootScope like this, instead you can either share a common servce data across your controllers or simply use one controller for all your tabs, such as the following:

[1] Share a common service data across your controllers:

DEMO

JAVASCRIPT

angular.module('plunker', ['ui.bootstrap'])

.service('Common', function() {
  this.tabData = {};
})

.controller('SampleController', function($scope, Common) {
  $scope.tabData = Common.tabData;
})

.controller("SampleTab2Controller", function($scope, Common) {
  $scope.tabData = Common.tabData;
});

HTML

   
    
      
      
           Input Text
         
          Next
      
    
    
    

    
    

      

         
Text from Tab1
        
      
      
    

  

[2] Use one controller for all your tabs

DEMO

JAVASCRIPT

angular.module('plunker', ['ui.bootstrap'])

.controller('TabController', function($scope) {

});

HTML

  

   
    
      
      

           Input Text
         
          Next
      
    
    
    

    
    

      

         
Text from Tab1