angular-strap aside don't display properly on navbar-fixed-top

I am using angular-strap aside to display menu which is open from the button on navbar using bootstrap 3. Everything is working properly. However, after I put in navbar-fixed-top class to navbar, it don't display properly.

HTML code:

<div ng-app="myApp" ng-controller="myController">
    <!-- When navbar-fixed-top class is added in, it causes problem. Without it, everything works fine -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" bs-aside="aside" data-placement="left">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
      </div>
    </div><!-- /.container-fluid -->
  </nav>
</div>

Javascript code:

var app = angular.module('myApp', ['mgcrea.ngStrap.aside']);

app.controller('myController', function($scope){
  $scope.aside = {
    "title": "Title",
    "content": "This is the message!"
  };
});

http://ift.tt/1LECdOs

How can I get it works?

Thank you