title: Angular Bootstrap DatePicker Directive (Eternicode version) not staying open
body: <p>I'm working on integrating <a href="https://github.com/eternicode/bootstrap-datepicker" rel="nofollow noreferrer">Eternicode's Bootstrap Datepicker</a> into my app. I wasn't sure how to connect it to my model so I found a directive that uses it from <a href="https://gist.github.com/HasAndries/3135128" rel="nofollow noreferrer">here</a>. Now I've got the datepicker on my page but it won't stay open when I click on the input field. The datepicker opens and closes almost instantly. If I click on an adjacent field and tab into the datepicker field, it stays open as would be expected. I'm also having problems getting it the appear where I would like it to be. When it does open, it's under some other elements and out of place. It should open directly below the input field. See screenshot below.</p>
  
  <p><a href="https://i.stack.imgur.com/K3fMn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/K3fMn.png" alt="misplaced"></a></p>
  
  <p>In my controller I have:</p>
  
  <pre><code>$scope.dateOptions = {
      format: 'dd/mm/yyyy',
      autoclose: false,
      clearBtn: true,
      container: '#datepicker',
      showOnFocus: true,
      startDate: new Date(),
      todayBtn: true,
      todayHighlight: true,
      weekStart: 1,
      zIndexOffset: 5000
  }
  $scope.newPost = {
      token: $scope.token,
      post: $scope.post,
      posts: {
          twitter: null,
          facebook: null,
          linkedin: null
      },
      attachment_url: $scope.attachment_url,
      media_url: $scope.media_url,
      services: {
          twitter: $scope.twitter,
          facebook: $scope.facebook,
          linkedin: $scope.linkedin
      },
      dateObject: today,
      timeObject: today
  };
  </code></pre>
  
  <p>Then in my directive I have:</p>
  
  <pre><code>.directive('bDatepicker', function(){
      return {
          require: '?ngModel',
          restrict: 'A',
          link: function ($scope, element, attrs, controller) {
              var updateModel, onblur;
  
              if (controller != null) {
  
                  updateModel = function (event) {
                      element.datepicker('hide');
                      element.blur();
                  };
  
                  onblur = function () {
                      //we'll update the model in the blur() handler
                      //because it's possible the user put in an invalid date
                      //in the input box directly.
                      //Bootstrap datepicker will have overwritten invalid values
                      //on blur with today's date so we'll stick that in the model.
                      //this assumes that the forceParse option has been left as default(true)
                      //https://github.com/eternicode/bootstrap-datepicker#forceparse
                      var date = element.val();
                      return $scope.$apply(function () {
                          return controller.$setViewValue(date);
                      });
                  };
  
                  controller.$render = function () {
                      var date = controller.$viewValue;
                      if (angular.isDefined(date) &amp;&amp; date != null &amp;&amp; angular.isDate(date))
                      {
                          element.datepicker().data().datepicker.date = date;
                          element.datepicker('setValue');
                          element.datepicker('update');
                      } else if (angular.isDefined(date)) {
                          throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
                      }
                      return controller.$viewValue;
                  };
              }
              return attrs.$observe('bDatepicker', function (value) {
                  var options;
                  options = { }; //&lt;--- insert your own defaults here!
                  if (angular.isObject(value)) {
                      options = value;
                  }
                  if (typeof (value) === "string" &amp;&amp; value.length &gt; 0) {
                      options = angular.fromJson(value);
                  }
                  return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
              })
          }
      }
  });
  </code></pre>
  
  <p>Lastly in my view I have:</p>
  
  <pre><code>&lt;input b-datepicker="{{dateOptions}}" ng-model="newPost.dateObject" id="datepicker"&gt;
  </code></pre>
  
  <p>I created a fiddle, but I can't get it to work right. I'm getting an <code>Uncaught Error: [$injector:modulerr]</code> error that I can't figure out how to resolve. Here is the link: <a href="https://jsfiddle.net/kxge3cqf/" rel="nofollow noreferrer">https://jsfiddle.net/kxge3cqf/</a></p>
  
  <p>Here is a sample from `social_media_posts.json:</p>
  
  <pre><code>[
      {
          id: 50,
          company_id: 94,
          employer_id: 3,
          post: "testing without attachments",
          attachment_url: null,
          twitter: true,
          facebook: false,
          linkedin: false,
          post_date: "Fri, Oct 30, 2015",
          post_time: " 2:50 PM EDT"
      },
      {
          total_count: 1
      }
  ]
  </code></pre>
  
  <p>Here is a sample from <code>groups.json</code>:</p>
  
  <pre><code>{
      groups: {
          1: {
              id: 1,
              name: "Human Resources",
              created_at: "2015-10-27T16:23:07.287Z",
              updated_at: "2015-11-01T16:11:43.329Z",
              company_id: 94
          },
          2: {
              id: 2,
              name: "Marketing",
              created_at: "2015-11-01T15:32:28.988Z",
              updated_at: "2015-11-01T16:11:43.354Z",
              company_id: 94
          }
      }
  }
  </code></pre>
  
  <p>Here is a sample from <code>contacts.json</code>:</p>
  
  <pre><code>{
      contacts: {
          1: {
              id: 1,
              first_name: "Foo",
              last_name: "Bar",
              email: "foo.bar@baz.biz",
              created_at: "2015-10-27T16:24:00.832Z",
              updated_at: "2015-11-01T16:11:52.426Z",
              company_id: 94
          }
      }
  }
  </code></pre>