angularjs-bindings

HTML

<script src="//code.angularjs.org/1.6.0/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.min.js"></script>
<div ng-app="app">
  <comp name-optional="'one'" name-required="'two'"></comp>
  <comp></comp>
</div>

Babel + JSX

angular
  .module('app', [])
  .component('comp', {
    template: '<pre>Optional: {{$ctrl.nameOptional}} - Required: {{$ctrl.nameRequired}}</pre>',
    bindings: {
      nameOptional: '<?',
      nameRequired: '<'
    },
 	 	controller: function () {
   		this.nameOptional = 'modified one';
      this.nameRequired = 'modified two';
   	}
	});