(function () {

    'use strict';

    /**
     * @ngdoc module
     * @name ui.container
     *
     * @description an ui container that extends the angular-material
     * framework an creates an wrapper on the main content
     *
     */

    angular
        .module('ui.container', [])
        .directive('uiContainer', uiContainerDirective)
        .provider('$uiContainer', uiContainerProvider);

    uiContainerDirective.$inject = ['$compile', '$mdMedia', '$animate', '$uiContainer', '$log'];


    /**
     * @ngdocs directive
     * @name uiContainerDirective
     * @module ui.container
     *
     * @restrict EA
     *
     * @description create an ui-container directive that create an flex-container
     * around the main aria and creates an spacer left and right of the container.
     *
     * The Spacer scales within the application an hides on a breakboint less
     * then angular materials 'gt-md'.
     *
     * @param {integer} uiFlex the width of the spacer
     * @param {string} uiShowOn the default hide aria
     *
     */
    function uiContainerDirective($compile, $mdMedia, $animate, $uiContainer, $log) {

        return {
            scope: {
                uiShowOn: '@'
            },
            link: link,
            restrict: ' EA'
        };

        function link(scope, element, attrs) {

            $log.log('uiFlex:', $uiContainer.getUiFlex());

            scope.$watch(function () {

                return $mdMedia(scope.uiShowOn);

            }, function (isShown, oldValue) {

                var e = element.parent().find('.ui-spacer');

                //  $animate[isShown ? 'addClass' : 'revmoveClass'](element, 'hide');
                if(isShown) {
                    $animate.removeClass(e[0], 'hide');
                    $animate.removeClass(e[1], 'hide');
                } else {
                    $animate.addClass(e[0], 'hide');
                    $animate.addClass(e[1], 'hide');
                }

            });

            var spacer = '<div flex="' + $uiContainer.getUiFlex() + '" class="ui-spacer">';

            element.parent().prepend(spacer);
            element.parent().append(spacer);
            element.attr('flex', 'flex');

            $compile(element.contents())(scope);
        }
    }

    /**
     * @ngdocs provider
     * @name uiContainerProvider
     * @module ui.container
     *
     * @description a provider to configure the flex width of the spacer element.
     *
     */
    function uiContainerProvider() {
        this.uiFlex = 20;

        this.setUiFlex = function(value) {
            this.uiFlex = value;
        };

        this.$get = function() {
            var self = this;
            return {
                getUiFlex: function() {
                    return self.uiFlex;
                }
            }
        };
    }

})();
@@ -1,28 +1,118 @@
+/**%0A * ui.container  - v0.2.0%0A *%0A * Copyright 2016 - wahlemedia%0A * Licence under MIT%0A */%0A%0A
 (function () %7B%0A%0A    'use str
@@ -999,18 +999,18 @@
 als 'gt-
+s
 m
-d
 '.%0A     
@@ -1263,51 +1263,8 @@
 e: %7B
-%0A                uiShowOn: '@'%0A            
 %7D,%0A 
@@ -1510,22 +1510,34 @@
 dia(
-scope.u
+$uiContainer.getU
 iShowOn
+()
 );%0A%0A
@@ -2592,16 +2592,49 @@
 ex = 20;
+%0A        this.uiShowOn = 'gt-sm';
 %0A%0A      
@@ -2707,32 +2707,124 @@
 ue;%0A        %7D;%0A%0A
+        this.setUiShowOn = function(value) %7B%0A            this.uiShowOn = value;%0A        %7D;%0A%0A
         this.$ge
@@ -2922,32 +2922,32 @@
 x: function() %7B%0A
-
                 
@@ -2970,16 +2970,119 @@
 uiFlex;%0A
+                %7D,%0A                getUiShowOn: function() %7B%0A                    return self.uiShowOn;%0A
         

Update credentials and change the directive.