Untitled

<body ng-app="app" ng-controller="Main as main">

<ng-view></ng-view>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/foundation-sites/js/foundation.core.js"></script>
<script src="bower_components/foundation-sites/js/foundation.equalizer.js"></script>

<script> $(document).foundation(); </script>

</body>

<div class="row" data-equalizer data-equalize-on="medium" id="test-eq">
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/square-1.jpg">
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
    </div>
  </div>
  <div class="medium-4 columns">
    <div class="callout" data-equalizer-watch>
      <img src= "assets/img/generic/rectangle-1.jpg">
    </div>
  </div>
</div>

var elem = new Foundation.Equalizer(element, options);

angular.module('app').component('user', {
  controller: UserController,
  template: `
    <div class="row js-equalizer" data-equalizer data-equalize-on="medium" id="test-eq">
      <div class="medium-4 columns">
        <div class="callout" data-equalizer-watch>
          <img src= "assets/img/generic/square-1.jpg">
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="callout" data-equalizer-watch>
          <p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
        </div>
      </div>
      <div class="medium-4 columns">
        <div class="callout" data-equalizer-watch>
          <img src= "assets/img/generic/rectangle-1.jpg">
        </div>
      </div>
    </div>
  `
});

function UserController() {
  const vm = this;
  vm.$onInit = function() {
    new Foundation.Equalizer($('.js-equalizer'));
  }
}