title: Adding provider to config in AngularJs not working
body: <p>With the use of <a href="https://github.com/sachinchoolur/angular-flash" rel="nofollow noreferrer">sachinchoolur's angularjs-flash</a> module I want to add flash messages to my application.</p>
  
  <p>The flash messages are working with my setup, but they don't disappear. </p>
  
  <p>In the documentation it says to add a <strong>Time Out</strong> with a <strong>FlashProvider</strong> in the app's configuration.</p>
  
  <p>I am trying to do this but whenever I inject the <strong>FlashProvider</strong>, my AngularJs logic stops working (all logic).</p>
  
  <p><strong>FlashProvider from the 3rd party module: <em>angular-flash.min.js</em></strong></p>
  
  <pre><code>app.provider('Flash', function () {
      var defaultConfig = {};
      var templatePresets = {
          bootstrap: {
              html: '\n                &lt;div role="alert" id="{{flash.config.id}}"\n                    class="alert {{flash.config.class}} alert-{{flash.type}} alert-dismissible alertIn alertOut"&gt;\n                    &lt;div type="button" class="close" ng-show="flash.showClose" close-flash="{{flash.id}}"&gt;\n                        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;\n                        &lt;span class="sr-only"&gt;Close&lt;/span&gt;\n                    &lt;/div&gt;\n                    &lt;span dynamic="flash.text"&gt;&lt;/span&gt;\n                &lt;/div&gt;',
              transclude: false
          },
          transclude: {
              html: '&lt;div applytransclude&gt;&lt;/div&gt;',
              transclude: true
          }
      };
  
      this.setTimeout = function (timeout) {
          if (typeof timeout !== 'number') return;
          defaultConfig.timeout = timeout;
      };
      this.setShowClose = function (value) {
          if (typeof value !== 'boolean') return;
          defaultConfig.showClose = value;
      };
      this.setTemplate = function (template) {
          if (typeof template !== 'string') return;
          defaultConfig.template = template;
      };
      this.setTemplatePreset = function (preset) {
          if (typeof preset !== 'string' || !(preset in templatePresets)) return;
  
          var template = templatePresets[preset];
          this.setTemplate(template.html);
          defaultConfig.templateTransclude = template.transclude;
      };
      this.setOnDismiss = function (callback) {
          if (typeof callback !== 'function') return;
          defaultConfig.onDismiss = callback;
      };
  
      this.setTimeout(5000);
      this.setShowClose(true);
      this.setTemplatePreset('bootstrap');
  
      this.$get = ['$rootScope', '$timeout', function ($rootScope, $timeout) {
          var dataFactory = {};
          var counter = 0;
  
          dataFactory.setTimeout = this.setTimeout;
          dataFactory.setShowClose = this.setShowClose;
          dataFactory.setOnDismiss = this.setOnDismiss;
          dataFactory.config = defaultConfig;
  
          dataFactory.create = function (type, text, timeout, config, showClose) {
              if (!text) return false;
              var $this = void 0,
                  flash = void 0;
              $this = this;
              flash = {
                  type: type,
                  text: text,
                  config: config,
                  id: counter++
              };
              flash.showClose = typeof showClose !== 'undefined' ? showClose : defaultConfig.showClose;
              if (defaultConfig.timeout &amp;&amp; typeof timeout === 'undefined') {
                  flash.timeout = defaultConfig.timeout;
              } else if (timeout) {
                  flash.timeout = timeout;
              }
              $rootScope.flashes.push(flash);
              if (flash.timeout) {
                  flash.timeoutObj = $timeout(function () {
                      $this.dismiss(flash.id);
                  }, flash.timeout);
              }
              return flash.id;
          };
          dataFactory.pause = function (index) {
              if ($rootScope.flashes[index].timeoutObj) {
                  $timeout.cancel($rootScope.flashes[index].timeoutObj);
              }
          };
          dataFactory.dismiss = function (id) {
              var index = findIndexById(id);
              if (index !== -1) {
                  var flash = $rootScope.flashes[index];
                  dataFactory.pause(index);
                  $rootScope.flashes.splice(index, 1);
                  if (typeof defaultConfig.onDismiss === 'function') {
                      defaultConfig.onDismiss(flash);
                  }
              }
          };
          dataFactory.clear = function () {
              while ($rootScope.flashes.length &gt; 0) {
                  dataFactory.dismiss($rootScope.flashes[0].id);
              }
          };
          dataFactory.reset = dataFactory.clear;
          function findIndexById(id) {
              return $rootScope.flashes.map(function (flash) {
                  return flash.id;
              }).indexOf(id);
          }
  
          return dataFactory;
      }];
  });
  </code></pre>
  
  <p><strong>My main module configuration</strong></p>
  
  <pre><code>// public/js/app.js
  angular.module('myApp', [
    'ngRoute',
    'ngFlash',
    'myApp.home',
    'myApp.profile',
    'myApp.login',
    'myApp.signup'
  
  ])
  .config(['$locationProvider', '$routeProvider', 'FlashProvider'
    function($locationProvider, $routeProvider, $httpProvider, FlashProvider) {
  
  
  
      $locationProvider.hashPrefix('!');
  
  
  
      $routeProvider.otherwise({redirectTo: '/home'});
  }]);
  </code></pre>
  
  <p><strong>Javascript reference in the html file</strong></p>
  
  <pre><code>&lt;script src="bower_components/angular-flash-alert/dist/angular-flash.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>According to the documentation to automatically disappear the flashes after a certain amount of time I did this, but they still don't disappear.</p>
  
  <p><strong>html file</strong></p>
  
  <pre><code>&lt;flash-message duration="5000"&gt;&lt;/flash-message&gt;
  </code></pre>
  
  <p><strong>config file</strong></p>
  
  <pre><code>.config(['$locationProvider', '$routeProvider', '$httpProvider', 'FlashProvider',
        function($locationProvider, $routeProvider, $httpProvider, FlashProvider) {
  
          FlashProvider.setTimeout(5000);
  </code></pre>