diff --git a/source/watchInBindings/watchInBindings.ts b/source/watchInBindings/watchInBindings.ts
index db69cac..d508a00 100644
--- a/source/watchInBindings/watchInBindings.ts
+++ b/source/watchInBindings/watchInBindings.ts
@@ -15,15 +15,11 @@ class WatchInBindingsParentController {
 	watchedValue: number;
 }
 
-function watchInBindingsParent(): angular.IDirective {
-	return {
-		restrict: 'E',
-		template: require('./parent.html'),
-		controller: 'WatchInBindingsParentController',
-		controllerAs: 'controller',
-		scope: {},
-	};
-}
+const watchInBindingsParent: angular.IComponentOptions {
+	template: require('./parent.html'),
+	controller: 'WatchInBindingsParentController',
+	controllerAs: 'controller',
+};
 
 class WatchInBindingsChildController {
 	binding: number;
@@ -36,21 +32,17 @@ class WatchInBindingsChildController {
 	}
 }
 
-function watchInBindingsChild(): angular.IDirective {
-	return {
-		restrict: 'E',
-		template: require('./child.html'),
-		controller: 'WatchInBindingsChildController',
-		controllerAs: 'controller',
-		scope: {},
-		bindToController: {
-			binding: '<',	
-		},
-	};
-}
+const watchInBindingsChild: angular.IComponentOptions = {
+	template: require('./child.html'),
+	controller: 'WatchInBindingsChildController',
+	controllerAs: 'controller',
+	bindings: {
+		binding: '<',	
+	},
+};
 
 angular.module(moduleName, [])
 	.controller('WatchInBindingsParentController', WatchInBindingsParentController)
-	.directive('tsWatchInBindings', watchInBindingsParent)
+	.component('tsWatchInBindings', watchInBindingsParent)
 	.controller('WatchInBindingsChildController', WatchInBindingsChildController)
-	.directive('tsWatchInBindingsChild', watchInBindingsChild);
+	.component('tsWatchInBindingsChild', watchInBindingsChild);
diff --git a/source/watchInService/watchInService.ts b/source/watchInService/watchInService.ts
index 75a279b..09c70dd 100644
--- a/source/watchInService/watchInService.ts
+++ b/source/watchInService/watchInService.ts
@@ -26,15 +26,11 @@ class ServiceProviderController {
 	constructor(public watchedService: WatchedService) {}
 }
 
-function serviceProvider(): angular.IDirective {
-	return {
-		restrict: 'E',
-		template: require('./serviceProvider.html'),
-		controller: 'ServiceProviderController',
-		controllerAs: 'controller',
-		scope: {},
-	};
-}
+const serviceProvider: angular.IComponentOptions = {
+	template: require('./serviceProvider.html'),
+	controller: 'ServiceProviderController',
+	controllerAs: 'controller',
+};
 
 class WatchInServiceController {
 	doubledValue: number;
@@ -47,19 +43,15 @@ class WatchInServiceController {
 	}
 }
 
-function watchInService(): angular.IDirective {
-	return {
-		restrict: 'E',
-		template: require('./watchInService.html'),
-		controller: 'WatchInServiceController',
-		controllerAs: 'controller',
-		scope: {},
-	};
-}
+const watchInService: angular.IComponentOptions = {
+	template: require('./watchInService.html'),
+	controller: 'WatchInServiceController',
+	controllerAs: 'controller',
+};
 
 angular.module(moduleName, [])
 	.controller('WatchInServiceController', WatchInServiceController)
-	.directive('tsWatchInService', watchInService)
+	.component('tsWatchInService', watchInService)
 	.service('watchedService', WatchedService)
 	.controller('ServiceProviderController', ServiceProviderController)
-	.directive('tsServiceProvider', serviceProvider);
+	.component('tsServiceProvider', serviceProvider);
diff --git a/source/watchInTemplate/watchInTemplate.ts b/source/watchInTemplate/watchInTemplate.ts
index 11635ce..f2845f1 100644
--- a/source/watchInTemplate/watchInTemplate.ts
+++ b/source/watchInTemplate/watchInTemplate.ts
@@ -16,16 +16,12 @@ class WatchInTemplateController {
 	}
 }
 
-function watchInTemplate(): angular.IDirective {
-	return {
-		restrict: 'E',
-		template: require('./watchInTemplate.html'),
-		controller: 'WatchInTemplateController',
-		controllerAs: 'controller',
-		scope: {},
-	};
-}
+const watchInTemplate: angular.IComponentOptions = {
+	template: require('./watchInTemplate.html'),
+	controller: 'WatchInTemplateController',
+	controllerAs: 'controller',
+};
 
 angular.module(moduleName, [])
 	.controller('WatchInTemplateController', WatchInTemplateController)
-	.directive('tsWatchInTemplate', watchInTemplate);
+	.component('tsWatchInTemplate', watchInTemplate);