Angular 1.5 component demo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
<div ng-app="demoApp" ng-controller="MainController as c">
<select ng-model="c.locationId" ng-options="item.LocationId as item.LocationName for item in c.locations">
  <option value>All</option>
</select>
   
    <p/>
 
Another Location:    
<select ng-model="c.locationCode">
    <option value>Unknown value</option>    
    <option>Doesn't work, ng-model can't receive null</option>    
    <option ng-value="null">Doesn't work, ng-model can't receive null too</option>
    <option value=''>Like null, empty string is a good value to denote all. However, empty string won't work on data type like number or date</option>
    <option value="ALL">Literal ALL, not a good value, as it can be a valid country code value, any code value for that matter</option>
    <option ng-repeat="location in c.locations" value="{{location.locationCode}}">{{location.LocationName}}</option>
</select>    

<hr/>

Location Id: {{c.locationId}}, Is Empty: {{c.locationId == null}}<br/>
Location Code: {{c.locationCode}}, Is Empty: {{c.locationCode == null}}

</div>

JavaScript

angular.module('demoApp', [])
	.controller('MainController', MainController);

function MainController() {
  
    this.locations = [
        {LocationId : 7, locationCode : 'CAD', LocationName : 'Canada' },       
        {LocationId : 8, locationCode : 'PHL', LocationName : 'Philippines' },
        {LocationId : 9, locationCode : 'CHN', LocationName : 'China' } 
    ];

    this.locationId = 8;
    this.locationCode = 'PHL';    
        
}