--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/app/shared/components/multichart-add/multichart-add.component.js	Fri Sep 08 11:22:57 2017 -0400
@@ -0,0 +1,40 @@
+/**
+ * Copyright 2012-2017 Red Hat, Inc.
+ *
+ * Thermostat is distributed under the GNU General Public License,
+ * version 2 or any later version (with a special exception described
+ * below, commonly known as the "Classpath Exception").
+ *
+ * A copy of GNU General Public License (GPL) is included in this
+ * distribution, in the file COPYING.
+ *
+ * Linking Thermostat code with other modules is making a combined work
+ * based on Thermostat.  Thus, the terms and conditions of the GPL
+ * cover the whole combination.
+ *
+ * As a special exception, the copyright holders of Thermostat give you
+ * permission to link this code with independent modules to produce an
+ * executable, regardless of the license terms of these independent
+ * modules, and to copy and distribute the resulting executable under
+ * terms of your choice, provided that you also meet, for each linked
+ * independent module, the terms and conditions of the license of that
+ * module.  An independent module is a module which is not derived from
+ * or based on Thermostat code.  If you modify Thermostat, you may
+ * extend this exception to your version of the software, but you are
+ * not obligated to do so.  If you do not wish to do so, delete this
+ * exception statement from your version.
+ */
+
+import controller from './multichart-add.controller.js';
+
+export default angular
+  .module('multichartAdd.component', [controller])
+  .component('mcAdd', {
+    bindings: {
+      svcName: '@',
+      getFn: '&'
+    },
+    controller: 'MultichartAddController',
+    template: require('./multichart-add.html')
+  })
+  .name;

--- a/src/app/shared/components/multichart-add/multichart-add.controller.js	Fri Sep 08 11:22:40 2017 -0400
+++ b/src/app/shared/components/multichart-add/multichart-add.controller.js	Fri Sep 08 11:22:57 2017 -0400
@@ -28,25 +28,25 @@
 import servicesModule from 'shared/services/services.module.js';
 
 class MultichartAddController {
-  constructor (multichartService, $scope, $timeout) {
+  constructor (multichartService, $timeout) {
     'ngInject';
-    this.svc = multichartService;
-    this.scope = $scope;
-    this.scope.multicharts = multichartService.chartNames;
+    this._svc = multichartService;
 
-    this.scope.$watch('multicharts', cur => {
-      $timeout(() => {
-        cur.forEach(chart => {
-          let el = angular.element('#' + chart + '-' + this.scope.svcName);
-          el.bootstrapSwitch();
-          el.on('switchChange.bootstrapSwitch', event => {
-            this.toggleChart(event.currentTarget.getAttribute('data-chart'));
-          });
+    $timeout(() => {
+      this.multicharts.forEach(chart => {
+        let el = angular.element('#' + chart + '-' + this.svcName);
+        el.bootstrapSwitch();
+        el.on('switchChange.bootstrapSwitch', event => {
+          this.toggleChart(event.currentTarget.getAttribute('data-chart'));
         });
       });
     });
   }
 
+  get multicharts () {
+    return this._svc.chartNames;
+  }
+
   toggleChart (chartName) {
     if (this.isInChart(chartName)) {
       this.removeFromChart(chartName);
@@ -56,19 +56,19 @@
   }
 
   removeFromChart (chartName) {
-    this.svc.removeService(chartName, this.scope.svcName);
+    this._svc.removeService(chartName, this.svcName);
   }
 
   addToChart (chartName) {
-    this.svc.addService(chartName, this.scope.svcName, this.scope.getFn);
+    this._svc.addService(chartName, this.svcName, this.getFn);
   }
 
   isInChart (chartName) {
-    return this.svc.hasServiceForChart(chartName, this.scope.svcName);
+    return this._svc.hasServiceForChart(chartName, this.svcName);
   }
 }
 
 export default angular
-  .module('multichartAddControllerModule', [servicesModule])
+  .module('multichartAddController', [servicesModule])
   .controller('MultichartAddController', MultichartAddController)
   .name;

--- a/src/app/shared/components/multichart-add/multichart-add.controller.spec.js	Fri Sep 08 11:22:40 2017 -0400
+++ b/src/app/shared/components/multichart-add/multichart-add.controller.spec.js	Fri Sep 08 11:22:57 2017 -0400
@@ -29,7 +29,7 @@
 
 describe('MultichartAddController', () => {
 
-  let svc, scope, timeout, ctrl;
+  let svc, timeout, ctrl;
 
   beforeEach(() => {
     angular.mock.module(controllerModule);
@@ -43,19 +43,14 @@
         hasServiceForChart: sinon.stub().returns(true)
       };
 
-      scope = {
-        svcName: 'foo-svc',
-        getFn: sinon.spy(),
-        $watch: sinon.spy()
-      };
-
       timeout = sinon.spy();
 
       ctrl = $controller('MultichartAddController', {
         multichartService: svc,
-        $scope: scope,
         $timeout: timeout
       });
+      ctrl.svcName = 'foo-svc';
+      ctrl.getFn = angular.noop;
     });
   });
 
@@ -64,7 +59,7 @@
   });
 
   it('should assign multichart names from service', () => {
-    scope.multicharts.should.deepEqual(svc.chartNames);
+    ctrl.multicharts.should.deepEqual(svc.chartNames);
   });
 
   describe('bootstrapSwitch', () => {
@@ -81,22 +76,14 @@
       angular.element.restore();
     });
 
-    it('should watch on multicharts', () => {
-      scope.$watch.should.be.calledWith('multicharts', sinon.match.func);
-    });
-
-    it('should use $timeout to wait for $scope $digest to complete', () => {
-      timeout.should.not.be.called();
-      let fn = scope.$watch.firstCall.args[1];
-      fn();
+    it('should use $timeout to wait for $digest to complete', () => {
       timeout.should.be.calledOnce();
       timeout.should.be.calledWith(sinon.match.func);
     });
 
     it('should set up bootstrapSwitch functionality for each switch', () => {
       svc.removeService.should.not.be.called();
-      let fn = scope.$watch.firstCall.args[1];
-      fn(['foo']);
+      svc.chartNames = ['foo'];
       timeout.yield();
 
       angular.element.should.be.calledOnce();
@@ -120,7 +107,7 @@
       svc.hasServiceForChart.should.not.be.called();
       ctrl.isInChart('foo').should.be.true();
       svc.hasServiceForChart.should.be.calledOnce();
-      svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName);
+      svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName);
     });
   });
 
@@ -129,7 +116,7 @@
       svc.addService.should.not.be.called();
       ctrl.addToChart('foo');
       svc.addService.should.be.calledOnce();
-      svc.addService.should.be.calledWith('foo', scope.svcName, scope.getFn);
+      svc.addService.should.be.calledWith('foo', ctrl.svcName, ctrl.getFn);
     });
   });
 
@@ -138,7 +125,7 @@
       svc.removeService.should.not.be.called();
       ctrl.removeFromChart('foo');
       svc.removeService.should.be.calledOnce();
-      svc.removeService.should.be.calledWith('foo', scope.svcName);
+      svc.removeService.should.be.calledWith('foo', ctrl.svcName);
     });
   });
 
@@ -149,10 +136,10 @@
       svc.removeService.should.not.be.called();
       ctrl.toggleChart('foo');
       svc.hasServiceForChart.should.be.calledOnce();
-      svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName);
+      svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName);
       svc.addService.should.not.be.called();
       svc.removeService.should.be.calledOnce();
-      svc.removeService.should.be.calledWith('foo', scope.svcName);
+      svc.removeService.should.be.calledWith('foo', ctrl.svcName);
     });
 
     it('should add if not present', () => {
@@ -162,9 +149,9 @@
       svc.removeService.should.not.be.called();
       ctrl.toggleChart('foo');
       svc.hasServiceForChart.should.be.calledOnce();
-      svc.hasServiceForChart.should.be.calledWith('foo', scope.svcName);
+      svc.hasServiceForChart.should.be.calledWith('foo', ctrl.svcName);
       svc.addService.should.be.calledOnce();
-      svc.addService.should.be.calledWith('foo', scope.svcName);
+      svc.addService.should.be.calledWith('foo', ctrl.svcName);
       svc.removeService.should.not.be.called();
     });
   });

--- a/src/app/shared/components/multichart-add/multichart-add.directive.js	Fri Sep 08 11:22:40 2017 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,48 +0,0 @@
-/**
- * Copyright 2012-2017 Red Hat, Inc.
- *
- * Thermostat is distributed under the GNU General Public License,
- * version 2 or any later version (with a special exception described
- * below, commonly known as the "Classpath Exception").
- *
- * A copy of GNU General Public License (GPL) is included in this
- * distribution, in the file COPYING.
- *
- * Linking Thermostat code with other modules is making a combined work
- * based on Thermostat.  Thus, the terms and conditions of the GPL
- * cover the whole combination.
- *
- * As a special exception, the copyright holders of Thermostat give you
- * permission to link this code with independent modules to produce an
- * executable, regardless of the license terms of these independent
- * modules, and to copy and distribute the resulting executable under
- * terms of your choice, provided that you also meet, for each linked
- * independent module, the terms and conditions of the license of that
- * module.  An independent module is a module which is not derived from
- * or based on Thermostat code.  If you modify Thermostat, you may
- * extend this exception to your version of the software, but you are
- * not obligated to do so.  If you do not wish to do so, delete this
- * exception statement from your version.
- */
-
-import controller from './multichart-add.controller.js';
-
-function configFactory () {
-  return {
-    restrict: 'EA',
-    controller: 'MultichartAddController',
-    controllerAs: 'ctrl',
-    template: require('./multichart-add.html'),
-    scope: {
-      svcName: '@',
-      getFn: '&'
-    }
-  };
-}
-
-export { configFactory };
-
-export default angular
-  .module('multichartAddDirective', [controller])
-  .directive('mcAdd', configFactory)
-  .name;

--- a/src/app/shared/components/multichart-add/multichart-add.directive.spec.js	Fri Sep 08 11:22:40 2017 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,62 +0,0 @@
-/**
- * Copyright 2012-2017 Red Hat, Inc.
- *
- * Thermostat is distributed under the GNU General Public License,
- * version 2 or any later version (with a special exception described
- * below, commonly known as the "Classpath Exception").
- *
- * A copy of GNU General Public License (GPL) is included in this
- * distribution, in the file COPYING.
- *
- * Linking Thermostat code with other modules is making a combined work
- * based on Thermostat.  Thus, the terms and conditions of the GPL
- * cover the whole combination.
- *
- * As a special exception, the copyright holders of Thermostat give you
- * permission to link this code with independent modules to produce an
- * executable, regardless of the license terms of these independent
- * modules, and to copy and distribute the resulting executable under
- * terms of your choice, provided that you also meet, for each linked
- * independent module, the terms and conditions of the license of that
- * module.  An independent module is a module which is not derived from
- * or based on Thermostat code.  If you modify Thermostat, you may
- * extend this exception to your version of the software, but you are
- * not obligated to do so.  If you do not wish to do so, delete this
- * exception statement from your version.
- */
-
-import { configFactory } from './multichart-add.directive.js';
-
-describe('MultichartAddDirective', () => {
-  let cfg;
-  beforeEach(() => {
-    cfg = configFactory();
-  });
-
-  it('should be restricted to an element or attribute', () => {
-    cfg.restrict.should.have.length(2);
-    cfg.restrict.should.containEql('E');
-    cfg.restrict.should.containEql('A');
-  });
-
-  it('should expect a svcName string in scope', () => {
-    cfg.scope.should.have.ownProperty('svcName');
-    cfg.scope.svcName.should.equal('@');
-  });
-
-  it('should expect a getFn expression in scope', () => {
-    cfg.scope.should.have.ownProperty('getFn');
-    cfg.scope.getFn.should.equal('&');
-  });
-
-  it('should use correct template', () => {
-    cfg.template.should.equal(require('./multichart-add.html'));
-  });
-
-  it('should attach multichartAddController', () => {
-    cfg.should.have.ownProperty('controller');
-    cfg.controller.should.equal('MultichartAddController');
-    cfg.should.have.ownProperty('controllerAs');
-    cfg.controllerAs.should.equal('ctrl');
-  });
-});

--- a/src/app/shared/components/multichart-add/multichart-add.html	Fri Sep 08 11:22:40 2017 -0400
+++ b/src/app/shared/components/multichart-add/multichart-add.html	Fri Sep 08 11:22:57 2017 -0400
@@ -5,15 +5,15 @@
   <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="kebab">
     <li><a ui-sref="multichart" translate>mcAdd.TITLE</a></li>
     <li role="separator" class="divider"></li>
-    <li ng-repeat="chart in multicharts">
+    <li ng-repeat="chart in $ctrl.multicharts">
       <div class="text-right">
         <div class="form-group">
-          <label for="switch-{{chart}}-{{svcName}}" class="label label-info pull-left">{{chart}}</label>
-          <input class="bootstrap-switch pull-right" id="{{chart}}-{{svcName}}" name="switch-{{chart}}-{{svcName}}" data-chart="{{chart}}"
-                                                                                                                    data-size="mini"
-                                                                                                                    type="checkbox"
-                                                                                                                    ng-checked="ctrl.isInChart(chart)"
-                                                                                                                    />
+          <label for="switch-{{chart}}-{{$ctrl.svcName}}" class="label label-info pull-left">{{chart}}</label>
+          <input class="bootstrap-switch pull-right" id="{{chart}}-{{$ctrl.svcName}}" name="switch-{{chart}}-{{$ctrl.svcName}}" data-chart="{{chart}}"
+                                                                                                                                data-size="mini"
+                                                                                                                                type="checkbox"
+                                                                                                                                ng-checked="$ctrl.isInChart(chart)"
+                                                                                                                                />
         </div>
       </div>
     </li>

--- a/src/app/shared/components/multichart-add/multichart-add.module.js	Fri Sep 08 11:22:40 2017 -0400
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,36 +0,0 @@
-/**
- * Copyright 2012-2017 Red Hat, Inc.
- *
- * Thermostat is distributed under the GNU General Public License,
- * version 2 or any later version (with a special exception described
- * below, commonly known as the "Classpath Exception").
- *
- * A copy of GNU General Public License (GPL) is included in this
- * distribution, in the file COPYING.
- *
- * Linking Thermostat code with other modules is making a combined work
- * based on Thermostat.  Thus, the terms and conditions of the GPL
- * cover the whole combination.
- *
- * As a special exception, the copyright holders of Thermostat give you
- * permission to link this code with independent modules to produce an
- * executable, regardless of the license terms of these independent
- * modules, and to copy and distribute the resulting executable under
- * terms of your choice, provided that you also meet, for each linked
- * independent module, the terms and conditions of the license of that
- * module.  An independent module is a module which is not derived from
- * or based on Thermostat code.  If you modify Thermostat, you may
- * extend this exception to your version of the software, but you are
- * not obligated to do so.  If you do not wish to do so, delete this
- * exception statement from your version.
- */
-
-import directive from './multichart-add.directive.js';
-import controller from './multichart-add.controller.js';
-
-export default angular
-  .module('multichartAddModule', [
-    directive,
-    controller
-  ])
-  .name;