Directive Works Locally But Not Deployed to Device

ionic-v1
1

I am building my first Ionic app. I build it using the yeoman “M” generator.when I build/run/debug my app locally everything works correctly.

However, when I zip it up and upload it to PhoneGap Build and then download and install the app, my directive does not show up.

Here is my directive.js code:

(function () {
  'use strict';

  angular
    .module('main')
    .directive('vimStockGrowthRates', vimStockGrowthRates);

  /* @ngInject */
  function vimStockGrowthRates() {
    var directive = {
      scope: {
        title: '@',
        growthRates: '='
      },
      templateUrl: 'main/directives/vimStockGrowthRates.html',
      restrict: 'AE',
    };
    return directive;
  }
})();

Here is my directive html template:

<div ng-class="(growthRates.growthRate > 10) ? 'bggreen' : ((growthRates.growthRate < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{title}}</div>
<div ng-class="(growthRates.tenYr > 10) ? 'bggreen' : ((growthRates.tenYr < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{growthRates.tenYr | percentage:2}}</div>
<div ng-class="(growthRates.sevenYr > 10) ? 'bggreen' : ((growthRates.sevenYr < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{growthRates.sevenYr | percentage:2}}</div>
<div ng-class="(growthRates.fiveYr > 10) ? 'bggreen' : ((growthRates.fiveYr < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{growthRates.fiveYr | percentage:2}}</div>
<div ng-class="(growthRates.threeYr > 10) ? 'bggreen' : ((growthRates.threeYr < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{growthRates.threeYr | percentage:2}}</div>
<div ng-class="(growthRates.oneYr > 10) ? 'bggreen' : ((growthRates.oneYr < 5) ? 'bgred' : 'bgorange')" class="col padding-vertical tall-padding">{{growthRates.oneYr | percentage:2}}</div>

Here is how it is being used in my view.

<div class="card">
            <a ui-sref="stockGrowthRates" class="item item-divider item-icon-right">
              Growth Rates
              <i class="icon ion-chevron-right"></i>
            </a>
            <ion-item class="item">
              <div class="row center-text">
                <div class="col"></div>
                <div class="col">10 YR</div>
                <div class="col">7 YR</div>
                <div class="col">5 YR</div>
                <div class="col">3 YR</div>
                <div class="col">1 YR</div>
              </div>
            </ion-item>
            <a ui-sref="stockBVPS" class="item item-no-vertical-padding item-icon-right center-text">
              <div class="row row-no-vertical-padding row-center" vim-stock-growth-rates data-title="BVPS" data-growth-rates="vm.stock.bvpsGrowthRates"></div>
              <i class="icon ion-chevron-right"></i>
            </a>
            <a ui-sref="stockEPS" class="item item-no-vertical-padding item-icon-right center-text">
              <div class="row row-no-vertical-padding row-center" vim-stock-growth-rates data-title="EPS" data-growth-rates="vm.stock.epsGrowthRates"></div>
              <i class="icon ion-chevron-right"></i>
            </a>
            <a ui-sref="stockFCF" class="item item-no-vertical-padding item-icon-right center-text">
              <div class="row row-no-vertical-padding row-center" vim-stock-growth-rates data-title="FCF" data-growth-rates="vm.stock.fcfGrowthRates"></div>
              <i class="icon ion-chevron-right"></i>
            </a>
            <a ui-sref="stockRevenue" class="item item-no-vertical-padding item-icon-right center-text">
              <div class="row row-no-vertical-padding row-center" vim-stock-growth-rates data-title="Revenue" data-growth-rates="vm.stock.revenueGrowthRates"></div>
              <i class="icon ion-chevron-right"></i>
            </a>
          </div>

What am I doing wrong? Why does it work locally but not installed?

Any help is appreciated!

Thanks!