title: Angular-Strap Error: [$injector:unpr] Unknown provider: $datepickerProvider
body: <p>I am learning AngularJs and there are a lot of new terms or which I am beginning to understand however this one I can't seem to figure out what I am doing wrong. </p>
  
  <p>All I am trying to do is use Angular-Strap to load a datepicker on my page. 
  <a href="http://mgcrea.github.io/angular-strap/##datepickers" rel="noreferrer">http://mgcrea.github.io/angular-strap/##datepickers</a></p>
  
  <p>The error I am getting and so far haven't figured out why is:</p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] Failed to instantiate module
    mgcrea.ngStrap due to: Error: [$injector:unpr] Unknown provider:
    $datepickerProvider</p>
  </blockquote>
  
  <p>My basic understanding tells me Angular is trying to inject a module it is dependent on but I can't find anywhere in documentation what the $datepickerProvider is, I am using the example code from the website.</p>
  
  <p>Html - Markup</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="mgcrea.ngStrap"&gt;
  &lt;head&gt;
  ...
  &lt;/head&gt;
  &lt;body ng-controller="ZenwireController"&gt;
                      &lt;div class="bs-example" style="padding-bottom: 24px;" append-source&gt;
                      &lt;form name="datepickerForm" class="form-inline" role="form"&gt;
                          &lt;!-- Basic example --&gt;
                          &lt;div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}"&gt;
                              &lt;label class="control-label"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; Date &lt;small&gt;(as date)&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker&gt;
                          &lt;/div&gt;
                          &lt;!-- Custom example --&gt;
                          &lt;div class="form-group" ng-class="{'has-error': datepickerForm.date2.$invalid}"&gt;
                              &lt;label class="control-label"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; Date &lt;small&gt;(as number)&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="text" class="form-control" ng-model="selectedDateAsNumber" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker&gt;
                          &lt;/div&gt;
                          &lt;hr&gt;
                          &lt;!-- Date range example --&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label"&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt; &lt;i class="fa fa-arrows-h"&gt;&lt;/i&gt; &lt;i class="fa fa-calendar"&gt;&lt;/i&gt; Date range &lt;small&gt;(dynamic)&lt;/small&gt;&lt;/label&gt;&lt;br&gt;
                              &lt;div class="form-group" class="col-xs-3"&gt;
                                  &lt;input type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="From" bs-datepicker&gt;
                              &lt;/div&gt;
                              &lt;div class="form-group" class="col-xs-3"&gt;
                                  &lt;input type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Until" bs-datepicker&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
           &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>AngularJs - Code</p>
  
  <pre><code>var app = angular.module('mgcrea.ngStrap', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);
  
  app.controller('ZenwireController', function ($scope) {
  });
  
  'use strict';
  
  angular.module('mgcrea.ngStrap')
  
  .config(function ($datepickerProvider) {
      angular.extend($datepickerProvider.defaults, {
          dateFormat: 'dd/MM/yyyy',
          startWeek: 1,
          autoClose: true,
          minDate: "today"
      });
  })
  
  .controller('DatepickerController', function ($scope, $http) {
  
      $scope.selectedDate = new Date();
      $scope.selectedDateAsNumber = Date.UTC(1986, 1, 22);
      // $scope.fromDate = new Date();
      // $scope.untilDate = new Date();
      $scope.getType = function (key) {
          return Object.prototype.toString.call($scope[key]);
      };
  
  });
  </code></pre>
  
  <p>The scripts I am loading are,</p>
  
  <pre><code>    bundles.Add(new ScriptBundle("~/bundles/angularjs").Include(
              "~/Scripts/angular.js",
              "~/Scripts/angular-animate.js",
              "~/Scripts/angular-sanitize.js",
              "~/Scripts/angular-strap.min.js",
              "~/Scripts/angular-strap.tpl.min.js",
              "~/Scripts/angular-strap/date-parser.min.js",
              "~/Scripts/angular-strap/tooltip.min.js"));
  </code></pre>