javascript - Angular bootstrap scope on screen size change -

my angular elements on different screen size sharing same controller. why when modify select options on small screen size (sm) , when shrink screen small (xs) changes has been lost?

i have 2 separate html files in order keep each file smaller , more structured. since design tablet , phones might different.

what should in order keep changes while switching between different screen sizes?

thanks help!

index.html

sm.html

    <div ng-controller="passengercontroller pd">          <div class="col-sm-2">             <div class="form-group">                 <label class="control-label" for="selectsmfrom12">12+ years</label>                 <select ng-init="adults" ng-model="adults" ng-options="value value value in adultvalues" class="form-control" id="selectsmfrom12"></select>             </div>         </div>          <div class="col-sm-2">             <div class="form-group">                 <label class="control-label" for="selectsmunder12">12+ years</label>                 <select ng-init="childrenunder12" ng-model="childrenunder12" ng-options="value value value in childrenunder12values" class="form-control" id="selectsmunder12"></select>             </div>         </div>          <div class="col-sm-2">             <div class="form-group">                 <label class="control-label" for="selectsminfants">12+ years</label>                 <select ng-init="infantsunder2" ng-model="infantsunder2" ng-options="value value value in infantsunder2values" class="form-control" id="selectsminfants"></select>             </div>         </div>     </div> 

xs.html

    <div ng-controller="passengercontroller pd">         <div class="col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectxsfrom12">12+ years</label>                 <select ng-init="adults" ng-model="adults" ng-options="value value value in adultvalues" class="form-control" id="selectxsfrom12"></select>             </div>         </div>          <div class="col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectxsunder12">12+ years</label>                 <select ng-init="childrenunder12" ng-model="childrenunder12" ng-options="value value value in childrenunder12values" class="form-control" id="selectxsunder12"></select>             </div>         </div>          <div class="col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectxsinfants">12+ years</label>                 <select ng-init="infantsunder2" ng-model="infantsunder2" ng-options="value value value in infantsunder2values" class="form-control" id="selectxsinfants"></select>             </div>         </div>     </div> 

app.js

var app = angular.module("mymodule");    app.controller('passengercontroller', ['$scope', function($scope) {       $scope.adults = 1;     $scope.childrenunder12 = 0;     $scope.infantsunder2 = 0;       $scope.adultvalues = [1,2,3,4,5,6,7,8,9,10];     $scope.childrenunder12values = [0, 1,2,3,4,5,6,7,8,9,10];     $scope.infantsunder2values = [0, 1,2,3,4,5,6,7,8,9,10];    }]);  var app = angular.module("fridayfly", ['ui.bootstrap']);   app.directive('searchbarsm', function() {     return {         restrict: 'e',         templateurl: 'templates/search-bar/sm.html'     }; });  app.directive('searchbarxs', function() {     return {         restrict: 'e',         templateurl: 'templates/search-bar/xs.html'     }; }); 

you shouldn't changing views when re-sizing, apply different classes. should add classes need. you're using bootstrap should this:

<div class="col-sm-2 col-xs-4">

you need 1 view. now, change screen sizes class & style sheet takes care of rest.

so in case, need one:

    <div ng-controller="passengercontroller pd">             <div class="col-sm-2 col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectsmfrom12">12+ years</label>                 <select ng-init="adults" ng-model="adults" ng-options="value value value in adultvalues" class="form-control" id="selectsmfrom12"></select>             </div>         </div>          <div class="col-sm-2 col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectsmunder12">12+ years</label>                 <select ng-init="childrenunder12" ng-model="childrenunder12" ng-options="value value value in childrenunder12values" class="form-control" id="selectsmunder12"></select>             </div>         </div>          <div class="col-sm-2 col-xs-4">             <div class="form-group">                 <label class="control-label" for="selectsminfants">12+ years</label>                 <select ng-init="infantsunder2" ng-model="infantsunder2" ng-options="value value value in infantsunder2values" class="form-control" id="selectsminfants"></select>             </div>         </div>     </div>