javascript - Load all tabs into DOM on app startup (using Ionic) -

i have app tabbed interface, consists of 3 tabs. when user takes actions on tab1, dynamically creates elements should appear on second tab. problem when try dynamically create content within javascript, i'm getting cannot set attribute of "null", i'm assuming because second tab isn't loaded dom yet. if first navigate second tab, first tab, works fine. i'm not using angular way it's used. done in javascript. have barebones app.js underlying ui.

essentially, want have 3 tabs loaded dom on app startup can dynamically modify contents of tab other tab. not sure how this. here's app.js looks like:

var myapp = angular.module('starter', ['ionic','ngcordova'])

myapp.run(function($ionicplatform) {   $ionicplatform.ready(function() {     // hide accessory bar default (remove show accessory bar above keyboard     // form inputs)     if(window.cordova && window.cordova.plugins.keyboard) {       cordova.plugins.keyboard.hidekeyboardaccessorybar(true);     }     if(window.statusbar) {       statusbar.styledefault();     }      $cordovastatusbar.overlayswebview(true)     $cordovastatusbar.stylehex('#4a87ee')     $ionicconfigprovider.views.forwardcache(true);   }); });  myapp.config(function($stateprovider, $urlrouterprovider) {    $stateprovider     .state('tabs', {       url: "/tab",       abstract: true,       templateurl: "templates/tabs.html"     })      .state('tabs.home', {       url: "/home",       views: {         'home-tab': {           templateurl: "templates/home.html"         }       }     })      .state('tabs.favorites', {       url: "/favorites",       views: {         'favorites-tab': {           template: "templates/favorites.html",           controller: 'appctrl'         }       }     })      .state('tabs.settings', {       url: "/settings",       views: {         'settings-tab': {           templateurl: "templates/settings.html"         }       }     });      $urlrouterprovider.otherwise("/tab/home");  })  myapp.controller('appctrl', function($scope) {  }) 

and basic app structure/html looks this:

<ion-nav-bar class="bar-positive"></ion-nav-bar>  <ion-nav-view></ion-nav-view>  <script id="templates/tabs.html" type="text/ng-template">   <ion-tabs class="tabs-positive tabs-icon-only">      <ion-tab title="videos" icon-on="ion-ios-home" icon-off="ion-ios-home-outline" href="#/tab/home">       <ion-nav-view name="home-tab"></ion-nav-view>     </ion-tab>      <ion-tab title="favorites" icon-on="ion-ios-star" icon-off="ion-ios-star-outline" href="#/tab/favorites">        <ion-nav-view name="favorites-tab"></ion-nav-view>     </ion-tab>      <ion-tab title="settings" icon-on="ion-ios-gear" icon-off="ion-ios-gear-outline" href="#/tab/settings">       <ion-nav-view name="settings-tab"></ion-nav-view>     </ion-tab>    </ion-tabs> </script>  <!-- **************************** home tab **************************** --> <script id="templates/home.html" type="text/ng-template">     <ion-view view-title="lmao!tube">          <ion-content has-bouncing="true" overflow-scroll="true" class="iframe-wrapper">              <div id="videolist"> </div>          </ion-content>      </ion-view> </script>  <!-- **************************** favorites tab **************************** -->   <script id="templates/favorites.html" type="text/ng-template">     <ion-view view-title="favorites" >          <ion-content has-bouncing="true" overflow-scroll="true" class="iframe-wrapper">              <div id="favoritelist"></div>          </ion-content>      </ion-view>   </script>  <!-- **************************** settings tab **************************** --> <script id="templates/settings.html" type="text/ng-template">     <ion-view view-title="settings">          <ion-content>          </ion-content>      </ion-view> </script> 

actually after rereading question, want different way. once click on tab, placed on stack , content rendered, that's why works when push , forward. better way utilizing angularjs , application framework saving changes boolean values in service. service object instantiated once hold information , pass around controller controller. can use service hold values controller dynamically creates content from, , in templates can use angularjs's directives ng-show , ng-if etc...

for instance in services.js have:

angular.module('starter.services', [])     .service('myservice', function() {         var stuff = {};         this.set = function(key, value) {             stuff[key] = value;         };         this.get = function(key) {             return stuff[key];         }     }); 

and in home controller

.controller('homectrl', function(myservice, $scope) {     myservice.set('home', true); }) 

and in favorites controller

.controller('favctrl', function(myservice, $scope) {     if (myservice.get('home') === true) {         // set variable or return list or query or whatever want         // lets it's array         $scope.list = [1,2,3];     } else {         $scope.list = [4,5,6];     } }) 

and in template like:

<div ng-repeat="i in list">     {{i}} </div> 

and should print out 1 2 3 if clicked home tab, , 4 5 6 if not.

if you're new angular go here: http://campus.codeschool.com/courses/shaping-up-with-angular-js/intro?utm_source=google&utm_medium=cpc&utm_campaign=course&gclid=cjwkeajw9bkpbrd-geif8ohz4ecsjaco4o7tsj3mx9m9doh47-6rmfshzukkkhzjfhjcnipl1it9jrocn_fw_wcb

pretty nifty course gets knowing things angularjs pretty fast work ionic. ionic great framework.