<div class="ajax-dropdown" ng-controller="ActivitiesCtrl as activitiesDropdown" >

   <!-- the ID links are fetched via AJAX to the ajax container "ajax-notifications" -->
   <div class="btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default" ng-class="{active : isActive(type.name)}" \
               ng-repeat="(key, type) in activities.types" ng-click="setTab(type.name)">
         <input type="radio" name="activity">
         {{type.title}} ({{type.length}}) 
      </label>
   </div>

   <!-- notification content -->
   <div class="ajax-notifications custom-scroll" ng-switch="activeTab">
         <div smart-include="build/components/activities/tabs/tab-msgs.html" ng-switch-when="msgs"></div>
         <div smart-include="build/components/activities/tabs/tab-notify.html" ng-switch-when="notify"></div>
         <div smart-include="build/components/activities/tabs/tab-tasks.html" ng-switch-when="tasks"></div>
         <div smart-include="build/components/activities/tabs/tab-default.html" ng-switch-when="default"></div>
   </div>
   <!-- end notification content -->

   <!-- footer: refresh area -->
   <span> Last updated on: {{activities.last_update}}
      <button type="button" data-loading-text="<i class='fa fa-refresh fa-spin'></i> Loading..." class="btn btn-xs btn-default pull-right">
         <i class="fa fa-refresh"></i>
      </button> 
      </span>
   <!-- end footer -->

</div>
