angularjs - Angular model/controller "hierarchy" setup -

i building angular app admin panel sites & environments using ngboilerplate. need setup kind of hierarchy of functions & model data such "child" controller/model doesn't work without "parent" being set. here breakdown of i'm trying explain.

model -> environment (prod, stage, dev) once env selected able select site

model -> sites (all sites current env) once site selected site data

model -> site (site data json contains things page configuration values , such)

what proper way setup structure this? using individual controllers & routes (ui-router) each within route within page. main functionality need ensure if environment changed site selected site's data reload proper environment. thinking using $watch ensure that? suggestions/tips on best practices on appreciated!

update: clarify here specifics:

the main model need "watched" environment model. depending on env set adjust api url being used change display name. load corresponding sites list env (currently static json file, api call instead). here code wrote before asking question, when got the sitesctrl realized doing wrong (or not optimally anyway).

tools.js

angular.module( 'supportbase.tools', [   'ui.router',   'placeholders',   'ui.bootstrap',   'supportbase.tools.sites' ])  .config(function config( $stateprovider ) {   $stateprovider.state( 'tools', {     url: '/tools',     views: {       "main": {         controller: 'toolsctrl',         templateurl: 'tools/tools.tpl.html'       },       "sites": {         controller: 'sitesctrl',         templateurl: 'tools/sites/sites.tpl.html'       }     },     data:{ pagetitle: 'site tools' }   }); })  .controller( 'toolsctrl', function toolctrl( $scope ) {   $scope.envmodel = '';  }); 

tools.tpl.hmtl

    <div class="row">     <h1 class="page-header">     site tools     <small>for lazy , impatient. {or smart & productive}</small>   </h1> </div> <div class="row">     <div class="well col-md-5">         <h4>current working environment:         <code class="env">{{envmodel || 'null'}}</code></h4>         <div class="btn-group col-md-10 col-md-offset-2">             <label class="btn btn-primary" ui-sref="tools.sites({env: envmodel})" ng-model="envmodel" btn-radio="'production'">production</label>             <label class="btn btn-primary" ui-sref="tools.sites({env: envmodel})" ng-model="envmodel" btn-radio="'stage'">stage</label>             <label class="btn btn-primary" ui-sref="tools.sites({env: envmodel})" ng-model="envmodel" btn-radio="'qa'">qa</label>             <label class="btn btn-primary" ui-sref="tools.sites({env: envmodel})" ng-model="envmodel" btn-radio="'dev'">dev</label>         </div>     </div>     <div class="col-md-6" ui-view="sites"></div> </div> 

sites.js

angular.module('supportbase.tools.sites', [     'ui.router',     'placeholders',     'ui.bootstrap',     'supportbase.tools' ])  .config(function config($stateprovider) {     $stateprovider.state('tools.sites', {         url: '/{env:[a-z]{1,10}}/sites',         views: {             "sites": {                 controller: 'sitesctrl',                 templateurl: 'tools/sites/sites.tpl.html'             }         },         data: {             pagetitle: 'site tools | supportbase'         }     }); })  .controller('sitesctrl', function sitesctrl($scope, $stateparams, $http) {     $scope.env = $stateparams.env.tolowercase();     $scope.disabled = $stateparams.env !== '' ? false : true;     if ($stateparams.env.tolowercase() === 'production') {         $http.get('./src/app/sites/sites.json').success(function(data) {             $scope.sitesmodel = data;         });     } else {         $scope.sitesmodel = [$stateparams.env, 'something', 'face'];     }   }); 

sites.tpl.html

    <div class="well" collapse="disabled">     <h1>site selector</h1>     <h2>{{sitesmodel}}</h2>     </div> 

i don't use ui.router i'll generic , can apply needed.

also have not tested exact code use guide.

// setup constants refer , change when needed .constant('site_config', {     'api_path' : '//prod.example.com',     'name' : 'production',     'collection' : '/production' });     .controller( 'homepage_controller', function($scope, $location, $log, site_config, environment){      var load_site = function() {         $scope.title = site_config.name;         environment.get().then(function(data){             $log.log('do ',data)         })     }      // looking sandbox.example.com      if(window.location.host.indexof('sandbox') > -1 ) {         environment.set('prod').then(function(){             $log.log('sandbox loaded')             load_site()         })      // looking qa.example.com      } else if (window.location.host.indexof('qa') > -1) {         environment.set('qa').then(function(){             $log.log('qa loaded')             load_site()         })      // looking www.example.com      } else {         environment.set('prod').then(function(){             $log.log('production loaded')             load_site()         })     }  })      .factory('environment', function ($window, $q, $http, $log, $rootscope, site_config) {      var environment = {};      environment.set = function(type) {         var deferred = $q.defer();          if(type == 'sandbox') {             site_config.api_path = '//sandbox.example.com';             site_config.name = 'sandbox';             site_config.collection = '/development';             deferred.resolve(true)         }         if(type == 'qa') {             site_config.api_path = '//qa.example.com';             site_config.name = 'qa';             site_config.collection = '/qa';             deferred.resolve(true)         }         if(type == 'production') {             site_config.api_path = '//prod.example.com';             site_config.name = 'production';             site_config.collection = '/production';             deferred.resolve(true)         }         return deferred.promise;     };      // showing example     environment.get = function() {          var deferred = $q.defer();         $http({             method:'get',             url: site_config.api_path+site_config.collection         })         .success(function(data) {             deferred.resolve(data);         })         .error(function(status, headers, config) {             deferred.reject(false);         });         return deferred.promise;     }      return environment; })