Angular 1.5 component demo

HTML

<div ng-app="demoApp">
  <div ng-controller="RoleController as ctrl">
    <nac-select field="ctrl.MemberRole.record.member" list="ctrl.Lists.Member" label="Member" on-change="ctrl.MemberRole.changeMember();"></nac-select>
  <div ng-bind="ctrl.MemberRole.record.member.name"></div>
  </div>
  
</div>

CSS

</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<style>

JavaScript

var nacSelect = {
    bindings: {
                field: '=',
                list: '<',
                label: '@label',
                onChange: '&'
            },
            controller: function () {
                var ctrl = this;
                ctrl.change = function () {
                    ctrl.onChange();
                }
            },
		template: `
    	
    <label>{{$ctrl.label}}</label>
    <select ng-model="$ctrl.field" ng-options="r as r.name for r in $ctrl.list | orderBy: 'name'" ng-required="$ctrl.req" ng-if="!$ctrl.list.processing" ng-change="$ctrl.change();">
        <option value="">(Please Select)</option>
    </select>
    `
};

var roleController = function(){
	var ctrl = this;
  ctrl.name = "Mandy";
  ctrl.Lists = {
  	Member: [
      {id: 1, name: 'Fred Smith'},
      {id: 2, name: 'Jenny Jones'},
      {id: 3, name: 'Jane Doe'}
    ]
  };
  ctrl.MemberRole = {
  	record: {
    	member: null
    },
    changeMember: function(){
    	alert(ctrl.MemberRole.record.member.name);
    
    }
  
  };

};

angular.module('demoApp', [])
  .component('nacSelect', nacSelect)
	.controller('RoleController', roleController)