Angular 1.6.5 Template

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
<script src="https://code.angularjs.org/1.6.5/angular-animate.js"></script>
<div ng-app="testApp" ng-controller="testController as $ctrl">
    <test-component value="$ctrl.test1"></test-component>
    <p>test service: {{$ctrl.test1}}</p>
    <p>test filter: {{$ctrl.test1 | testFilter}}</p>
    <pre>{{$ctrl.test2 | json}}</pre>
</div>

JavaScript

var app = angular.module('testApp', []);

app.component('testComponent', {
    bindings: {
        value: '<'
    },
    controller: ['$timeout', function($timeout) {
        var $ctrl = this;

        $ctrl.$onInit = function() {
        
        };
    }],
    template: 'test-component: {{$ctrl.value}}'
});
/*
class TestComponent {
	constructor() {
  }
}
app.component("testComponent", TestComponent);
*/

app.filter('testFilter', [function() {
    return function(v) {
        return v.toUpperCase();
    };
}]);

class TestService {
	constructor($timeout) {
  	this.timeout = $timeout;
	}
  
  testMethod() {
  	return 'service value';
	}
}
app.service('TestService', TestService);

class TestController {
	constructor($scope, $http, $timeout, TestService) {
  	var $ctrl = this;

    $ctrl.test1 = 'tested: ' + TestService.testMethod();

    $http.post('/echo/json/', 'json=' + encodeURIComponent(JSON.stringify({
        a: true
    }))).then(function(response) {
        $ctrl.test2 = response;
    });
  }
}
app.controller('testController', TestController);