Angular - Mobile Smart banner Directive

smart-banner.controller.js

angular.module('app')
.controller('smartBannerController', function () {
  'use strict';
  var vm = this;

  vm.open = true;

  vm.isAndroid = function (){
    return ((/android/i).test(navigator.userAgent)) ? true : false;
  }

  vm.close = function() {
    vm.open = false;
  }

  vm.banner = {
    title: '',
    subtitle : '',
    mode : '',
    appImage: '',
    appUrl: '',
    callToAction: ''
  };
});

smart-banner.js

angular.module('app')
.directive('smartBanner', function () {
  return {
    restrict: 'AE',
    controller: 'smartBannerController',
    controllerAs: 'vm',
    templateUrl: 'template.html'
  };
});

template.html

<div class="smartbanner" ng-show="vm.isAndroid() && vm.open">
  <div class="smartbanner-container">
    <a href="#" class="smartbanner-close" ng-click="vm.close()">&times;</a>
    <span class="smartbanner-icon">
      <img ng-src="{{vm.banner.appImage}}" alt="vm.banner.title">
    </span>
    <div class="smartbanner-info">
      <div class="smartbanner-title" ng-bind="vm.banner.title"></div>
        <div ng-bind="vm.banner.subtitle"></div>
        <span ng-bind="vm.banner.mode"></span>
      </div>
      <a href="{{vm.banner.appUrl}}" class="smartbanner-button" target="_blank">
        <span class="smartbanner-button-text" ng-bind="vm.banner.callToAction"></span>
      </a>
  </div>
</div>