<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.0-rc.0" data-semver="1.5.0-rc.0" src="https://code.angularjs.org/1.5.0-rc.0/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="base.controller.js"></script>
    <script src="base.service.js"></script>
  </head>

  <body ng-controller="BaseController as baseCtrl">
      <ul>
        <li ng-repeat="item in baseCtrl.data.items track by $index">{{item}}</li>
      </ul>
      
      <button ng-click="baseCtrl.onClick()">Load Values</button>
  </body>
</html>
'use babel';

(function() {
  'use strict';
  
  angular.module('app', []);
}());
/* Styles go here */

"use babel";

(function() {
  'use strict';
  
  class BaseController {
    constructor(BaseService) {
      this._baseService = BaseService;
      this.data = this._baseService.data;
    }
    
    onClick() {
      this._baseService.loadData();
    }
  }
  
  BaseController.$inject = ['BaseService'];
  angular.module('app').controller('BaseController', BaseController);
}());
"use babel";

(function() {
  'use strict';
  
  class BaseService {
    constructor() {
      this.data = {
        items: []
      };
    }
    
    loadData() {
      this.data.items = ['one', 'two', 'three'];
    }
  }
  
  angular.module('app').service('BaseService', BaseService);
}());