Angular引导作用域改变屏幕大小

不同屏幕尺寸的角元素共享同一个控制器。为什么当我在小屏幕尺寸(SM)上修改我的select options时，当收缩屏幕到特别小(XS)时，所有更改都丢失了?

我有两个单独的HTML文件，以保持每个文件更小，更结构化。因为我对平板电脑和手机的设计可能会非常不同。

在不同的屏幕尺寸之间切换时，我应该做些什么来保持我的更改?

谢谢你的帮助!

index . html

SM.html

    <div ng-controller="PassengerController as 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 as value for 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 as value for 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 as value for value in infantsUnder2Values" class="form-control" id="selectSMInfants"></select>
            </div>
        </div>
    </div>

XS.html

    <div ng-controller="PassengerController as 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 as value for 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 as value for 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 as value for 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'
    };
});