AngularJS-ui toggle accordion depending on window width - angularjs

Question

I am looking to add the accordion functionality programatically when the browser is under a certain width. I thought I might just destroy the accordion when the $window watch reports a width under, say 400px, and re-initiate it again when not. But that seems to be a silly idea after searching for a couple hours. Is there a way to do this or a better way to archive the same result?

Answer 1

Ok so for everyone that might face a similar issue, this is what we ended up doing:
In the Angular config we added a dynamic router:
$routeProvider
.when('/:a', {
template: '<div data-ng-include="templateUrl">Loading...</div>',
controller: 'DynamicController'
})
Then the controller looks like this:
.controller('DynamicController', function ($scope, $rootScope, $routeParams) {
var mobile = false; //set desktop first as mobil has more logic
var maxWidth = 768; //adjust this value in media queries aswell!
var _isMobile = "";
//listen for changes on the scope var windowWidth
$rootScope.$watch('windowWidth',function(){
//check that we have not exceeded our max width
if($rootScope.windowWidth < maxWidth) {
_isMobile = "mobile"; //set the current view based on the width to mobile
}
else {
_isMobile = "desktop"; //set the current view based on the width to desktop
}
$scope.templateUrl = function() {
var temp = (_isMobile ? _isMobile : 'desktop');
return 'views/' + temp + '.html';
}(); //immediate gets called every time the windowWidth var changes passes in the current required view as a string.
});
})
Which has a watch set up for this directive:
angular.module('app.config',[])
.directive('resize', function ($window) {
return {
controller: function ($scope, $rootScope) {
$rootScope.windowWidth = $window.innerWidth;
angular.element($window).bind('resize', function () {
$rootScope.$apply(function () {
$rootScope.windowWidth = $window.innerWidth;
});
});
}
};
});
Now we got two views for mobile and desktop which both draw in the same content but wrap them into either an accordion or in another container.
That seems to work nicely and hope will help some other internet traveler.