diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
index befb36c8dc..46b3084f17 100644
--- a/client/src/i18n/en.json
+++ b/client/src/i18n/en.json
@@ -1722,12 +1722,10 @@
    },
 "LOCATION": {
    "ADD"                   : "Add",
-   "COUNTRY"               : "Country",
    "CURRENT"               : "Current",
    "DESCRIPTION"           : "Location Manager Configuration is used to create location and to store it in the system, locations are very importants when you register a patient and so one. Use this module to",
-   "ET"                    : "and",
-   "INFO_CREATE"           : "create",
-   "INFO_MODIFY"           : "modify",
+   "INFO_CREATE"           : "Create",
+   "INFO_MODIFY"           : "Modify",
    "LOCALITY"              : "Locality",
    "LOCATION"              : "Location",
    "MANAGER_CONFIGURATION" : "Location Manager Configuration",
@@ -1737,15 +1735,16 @@
    "MANAGE_VILLAGE"        : "Manage Village",
    "NEW_FORM"              : "New Form",
    "ORIGIN"                : "Origin",
-   "PROVINCE"              : "Province",
-   "REGISTER"              : "Register a Location",
+   "REGISTER"              : "Register a new Location",
    "REGISTERED"            : "Registered Locations",
-   "REMOVE"                : "remove",
-   "SECTOR"                : "Sector",
+   "REMOVE"                : "Remove",
    "TITLE"                 : "Location Manager",
-   "VILLAGE"               : "Village",
    "VILLAGE_NAME"          : "Village Name",
-   "VILLE"                 : "Township/Commune"
+   "VILLE"                 : "Township/Commune",
+   "COUNTRY"               : "Country",
+   "PROVINCE"              : "Province",
+   "SECTOR"                : "Sector",
+   "VILLAGE"               : "Village"
    },
 "NO_EXCHANGE": {
    "CURRENT_DATE" : "Current Date",
@@ -2584,9 +2583,9 @@
    "TITLE"            : "Sector Manager"
    },
 "SELECT": {
-   "ACCOUNT"               : "Select Account",
-   "ACCOUNT_REFERENTIIAL"  : "Select the accounts referential",
-   "ACCOUNT_TYPE"          : "Select Account Type",
+   "ACCOUNT"               : "Select an Account",
+   "ACCOUNT_REFERENTIIAL"  : "Select the Referential Account",
+   "ACCOUNT_TYPE"          : "Select an Account Type",
    "ALL"                   : "All",
    "BALANCE_SECTION"       : "Select Balance Sheet Section",
    "CASH"                  : "Select a Cash",
@@ -2650,7 +2649,12 @@
    "VALUE"                 : "Select a value",
    "VILLAGE"               : "Select a Village",
    "WHOLE_YEAR_BUDGET"     : "Select the annual budget",
-   "ZS"                    : "Select an health zone"
+   "ZS"                    : "Select an health zone",
+   "VILLAGE"               : "Select a Village",
+   "SECTOR"                : "Select a Sector",
+   "PROVINCE"              : "Select a Province",
+   "COUNTRY"               : "Select a Country",
+   "EMPTY"                 : "No matching records!"
    },
 "SERVICE": {
    "COST_CENTER_SELECT"     : "Cost center",
diff --git a/client/src/js/directives/bhLocationSelect.js b/client/src/js/directives/bhLocationSelect.js
new file mode 100644
index 0000000000..2c033182b2
--- /dev/null
+++ b/client/src/js/directives/bhLocationSelect.js
@@ -0,0 +1,240 @@
+angular.module('bhima.directives')
+
+/**
+ * Location Selection Component - bhLocationSelect
+ */
+.component('bhLocationSelect', {
+  templateUrl : 'partials/templates/bhLocationSelect.tmpl.html',
+  controller : LocationSelectController,
+  bindings: {
+    locationUuid:      '=', // two-way binding
+    disable:           '<', // one-way binding
+    validationTrigger: '<', // one-way binding
+  }
+});
+
+LocationSelectController.$inject =  [ 'LocationService', '$scope' ];
+
+/**
+ * Location Select Controller
+ *
+ * This component allows easy selection and validation of locations to be used
+ * throughout bhima.
+ *
+ * COMPONENT LIFECYCLE
+ *
+ *  1. On startup, all countries are downloaded and bound the view.  If a
+ *  location-uuid was provided, the location is immediately downloaded and
+ *  selected in the view.
+ *
+ *  2. As the user changes each <select>, the dependent <select> will fire off
+ *  an HTTP request to load fresh data from the server.  It will also clear the
+ *  previous selections from dependent selects.
+ *
+ *  3. When the user finally selects a village, the location-uuid is updated
+ *  with the village's uuid.
+ *
+ * BINDINGS
+ *
+ *  1. [location-uuid] : A two-way bound location uuid.  The parent controller
+ *  should expect this ID to contain the selected location.
+ *  2. [disable] : A hook to allow an external controller to disable the entire
+ *  component.
+ *  3. [validation-trigger] : A hook to trigger validation on the component.
+ *  Will usually be ParentForm.$submitted.
+ *
+ * @constructor
+ * @example
+ * <bh-location-select
+ *   location-uuid="ctrl.locationId"
+ *   validation-trigger="ParentForm.$submitted">
+ * </bh-location-select>
+ *
+ */
+function LocationSelectController(Locations, $scope) {
+  var vm = this;
+
+  /** loading indicator */
+  vm.loading = false;
+
+  /** methods */
+  vm.loadVillages = loadVillages;
+  vm.loadSectors = loadSectors;
+  vm.loadProvinces = loadProvinces;
+  vm.updateLocationUuid = updateLocationUuid;
+
+  /** disabled bindings for individual <select>s */
+  vm.disabled = {
+    village:  true,
+    sector:   true,
+    province: true
+  };
+
+  /**
+   * <select> component messages to be translated
+   * if there is no data, indicate that to the user.
+   */
+  var selectCountry  = 'SELECT.COUNTRY';
+  var selectProvince = 'SELECT.PROVINCE';
+  var selectSector   = 'SELECT.SECTOR';
+  var selectVillage  = 'SELECT.VILLAGE';
+  var noData         = 'SELECT.EMPTY';
+  vm.messages = {
+    country:  selectCountry,
+    province: selectVillage,
+    sector:   selectSector,
+    village:  selectVillage,
+  };
+
+  // load the countries once, at startup
+  Locations.countries()
+  .then(function (countries) {
+    vm.countries = countries;
+
+    // if there are countries to select, show a "select a country" message
+    // however, if there isn't any data, show a "no data" message. This pattern
+    // is used throughout the component.
+    vm.messages.country = (countries.length > 0) ?
+      selectCountry :
+      noData;
+  });
+
+  /** load the provinces, based on the country selected */
+  function loadProvinces() {
+
+    // don't send an HTTP request if there is no country
+    if (!vm.country || !vm.country.uuid) { return; }
+
+    // allow the <select> to be selected
+    vm.disabled.province = false;
+
+    // load the provinces to bind to the view
+    Locations.provinces({ country : vm.country.uuid })
+    .then(function (provinces) {
+      vm.provinces = provinces;
+
+      // show the appropriate message to the user
+      vm.messages.province = (provinces.length > 0) ?
+        selectProvince :
+        noData;
+
+      // clear the dependent <select> elements
+      vm.sectors = [];
+      vm.villages = [];
+    });
+  }
+
+  /** load the sectors, based on the province selected */
+  function loadSectors() {
+
+    // don't send an HTTP request if there is no province
+    if (!vm.province || !vm.province.uuid) { return; }
+
+    // allow the <select> to be selected
+    vm.disabled.sector = false;
+
+    // fetch the sectors from the server
+    Locations.sectors({ province : vm.province.uuid })
+    .then(function (sectors) {
+      vm.sectors = sectors;
+
+      // show the appropriate message to the user
+      vm.messages.sector = (sectors.length > 0) ?
+        selectSector :
+        noData;
+
+      // clear the selected village
+      vm.villages = [];
+    });
+  }
+
+  /** load the villages, based on the sector selected */
+  function loadVillages() {
+
+    // don't send an HTTP request if there is no sector
+    if (!vm.sector || !vm.sector.uuid) { return; }
+
+    // allow the <select> to be selected
+    vm.disabled.village = false;
+
+    // fetch the villages from the server
+    Locations.villages({ sector : vm.sector.uuid })
+    .then(function (villages) {
+      vm.villages = villages;
+
+      // show the appropriate message to the user
+      vm.messages.village = (villages.length > 0) ?
+        selectVillage :
+        noData;
+    });
+  }
+
+  /** updates the exposed location uuid for the client to use */
+  function updateLocationUuid() {
+    vm.locationUuid = vm.village.uuid;
+    console.log('Location updated to:', vm.locationUuid);
+  }
+
+  /**
+   * If a location has been provided or changes, reload the datasource with the
+   * provided location uuid.
+   * @method loadLocation
+   * @private
+   */
+  function loadLocation() {
+
+    // make sure we actually have an initial location (prevents needless firing
+    // during $scope churn).
+    if (!vm.locationUuid) { return; }
+
+    // if the location is already selected, do not reload all datasoures.  This
+    // condition will occur when we manually called updateLocationUuid() from
+    // the village <select> element.
+    if (vm.village && vm.locationUuid === vm.village.uuid) { return; }
+
+    // download the location to the view via the LocationService
+    Locations.location(vm.locationUuid)
+    .then(function (initial)  {
+
+      // bind initial data to each <select> elementin the view
+      vm.village = {
+        uuid : initial.villageUuid,
+        village : initial.village,
+      };
+
+      vm.sector = {
+        uuid : initial.sectorUuid,
+        sector : initial.sector,
+      };
+
+      vm.province = {
+        uuid : initial.provinceUuid,
+        province : initial.province,
+      };
+
+      vm.country = {
+        uuid : initial.countryUuid,
+        country : initial.country,
+      };
+
+      // refresh all data sources to allow a user to use the <select> elements.
+      loadVillages();
+      loadSectors();
+      loadProvinces();
+    });
+  }
+
+  /**
+   * Hook up a listener to the locationUuid to reload it if it is changed
+   * externally.
+   *
+   * Note - this will also fire when updated internally, however loadLocation()
+   * should detect it and prevent unnecessary HTTP requests.
+   *
+   * In general, $scope.$watch is more inefficient than exposing an API to the
+   * parent controller.  However, this component favors minimal controller code
+   * over application efficiency.  This could be optimized as the application
+   * evolves.
+   */
+  $scope.$watch('vm.locationUuid', loadLocation);
+}
diff --git a/client/src/js/directives/locationSelect.js b/client/src/js/directives/locationSelect.js
deleted file mode 100644
index 3449c1b860..0000000000
--- a/client/src/js/directives/locationSelect.js
+++ /dev/null
@@ -1,302 +0,0 @@
-/**
- * @param {string} level-select The method that will be called on selection of a village, this method should accept a 32 char UUID
- * 
- * Note : Directive should have a separate template and link method;
- *  - Angular doesn't allow you to template ng-model
- *  - I'm too stuborn to let that win, and (simplify everything) just hard-code in location selects
- *  - This doesn't need to be this generic, and should be refactored if required
- */
-
-angular.module('bhima.directives')
-.component('bhLocationSelect', {
-  bindings : {
-    locationId : '=',  // two-way binding
-    onChange : '@',    // callback binding
-  },
-  controller : LocationSelectComponent,
-  templateUrl : 'partials/templates/bhLocationSelect.tmpl.html'
-});
-
-LocationSelectComponent.$inject =  [];
-
-/**
- * Location Select Component - bhLocationSelect
- *
- * This component allows easy selection and validation of locations to be used
- * throughout bhima.
- *
- */
-function LocationSelectComponent() {
-}
-
-/*
-.directive('locationSelect', ['appstate', 'connect', '$compile',  function (appstate, connect, $compile) {
-  return {
-    restrict : 'A',
-    replace : true,
-    transclue : true,
-    link : function (scope, element, attrs) {
-      
-      var submitCallback = attrs.selectVillage;
-      var defaultVillageTag = attrs.defaultVillage;
-      var initialLocationTag = attrs.initialLocation;
-  
-      // Verify location parameters
-      if (!submitCallback) { 
-        throw new Error('[locationSelect] Location select must define village selection callback');
-      }
-      if (!scope[submitCallback]) { 
-        throw new Error('[locationSelect] Village selection callback not found on scope');
-      }
-
-      scope.locationSelect = scope.locationSelect || {};
-
-      var namespace = scope.locationSelect[submitCallback] = {};
-
-      // TODO rename variables etc. with useful names 
-      var locationIndex = {};
-      var locationConfig = namespace.locationConfig = {
-        village : {
-          dependency : 'sector',
-          label : 'LOCATION.VILLAGE',
-          column : 'name',
-          id : 'village'
-        },
-        sector : {
-          dependency : 'province',
-          label : 'LOCATION.SECTOR',
-          column : 'name',
-          id : 'sector'
-        }, province : {
-          dependency : 'country',
-          label : 'LOCATION.PROVINCE',
-          column : 'name',
-          id : 'province'
-        },
-        country : {
-          dependency : null,
-          label : 'LOCATION.COUNTRY',
-          column : 'country_en',
-          id : 'country'
-        }
-      };
-      var locationStore = namespace.locationStore = {};
-      var initialised = false;
-
-      appstate.register('enterprise', settup);
-      
-      function settup(enterprise) {
-        var metaTemplate;
-        var defaultLocation = scope[defaultVillageTag] || enterprise.location_id;
-        indexLocationDependencies();
-        defineLocationRequests();
-      
-        metaTemplate = generateTemplate('locationConfig');
-        element.html($compile(metaTemplate)(scope));
-
-        scope.$watch(defaultVillageTag, refreshDefaultVillage);
-        scope.$watch(initialLocationTag, setInitialLocation);
-
-        fetchInitialLocation(defaultLocation)
-          .then(function (result) { 
-            return initialiseLocation(result);          
-          });
-      }
-
-      function setInitialLocation(nval, oval) {
-	if (nval) {
-          // Request new location 
-          fetchInitialLocation(nval)
-            .then(function (result) { 
-              return initialiseLocation(result);
-            });
-	}
-      }
-
-      function refreshDefaultVillage(nval, oval) { 
-
-        if (initialised) { 
-          
-          if (nval) { 
-
-            // Request new location 
-            fetchInitialLocation(nval)
-            .then(function (result) { 
-              return initialiseLocation(result);          
-            });
-          }
-        }
-      }
-
-      function fetchInitialLocation(villageUuid) {
-        return connect.fetch('/location/detail/' + villageUuid);
-      }
-
-      function initialiseLocation(defaultLocation) {
-        defaultLocation = defaultLocation[0];
-        
-        Object.keys(locationConfig).forEach(function (key) {
-          locationStore[key] = {model : {}, value : {}};
-          // modelMap.push(locationStore[key].value);
-          locationStore[key].value = defaultLocation[formatKeyId(key)];
-        });
-
-        // Initial request, update config with no dependency
-        fetchLocationData(lookupDependency(null), null);
-      }
-
-      function submitVillage(uuid) { 
-        initialised = true;
-        scope[submitCallback](uuid);
-        return;
-      }
-      
-      function fetchLocationData(key, uuidDependency) {
-        var config = locationConfig[key];
-        var model, requires; 
-        var requiredDependencyFailed;
-
-        model = locationStore[key].model;
-        requires = lookupDependency(key);
-        
-        // Conditions
-        requiredDependencyFailed = !uuidDependency && config.dependency;
-       
-        // Clear results and stop propegation 
-        if (requiredDependencyFailed) {
-          
-          model = locationStore[key].model = { data : [] };
-         
-          // FIXME hardcoded 
-          if (requires) {
-            fetchLocationData(requires, null);
-          } else { 
-            submitVillage(null);
-          }
-          return ;
-        }
-        
-        if (config.dependency) {
-          config.request.where = [key + '.' + formatKeyId(config.dependency) + '=' + uuidDependency];
-        }
-
-        // TODO Refactor : fetch and assign data from one function, each method 
-        // responsible for only one thing
-        // TODO Error / exception handling
-        connect.req(config.request).then(function (result) {
-          return assignLocationData(key, result);
-        });
-      }
-
-      function assignLocationData(key, result) {
-        var currentLocationValue, validCurrentLocation, locationsFound;
-        var store = locationStore[key];
-        var requiresCurrentKey = lookupDependency(key);
-      
-        store.model = result;
-        currentLocationValue = store.value;
-
-        // Conditions 
-        validCurrentLocation = angular.isDefined(store.model.get(store.value));
-        locationsFound = store.model.data.length;
-        
-        if (!validCurrentLocation) {
-          store.value = null;
-        }
-        if (locationsFound && !validCurrentLocation) {
-          store.value = store.model.data[0].uuid;
-        }
-
-               
-        // Propegate selection
-        if (requiresCurrentKey) {
-          fetchLocationData(requiresCurrentKey, store.value);
-        } else { 
-          submitVillage(store.value);   
-        }
-      }
-
-      function indexLocationDependencies() {
-        Object.keys(locationConfig).forEach(function (key) {
-          locationIndex[locationConfig[key].dependency] = key;
-        });
-      }
-      
-      function defineLocationRequests() {
-        Object.keys(locationConfig).forEach(function (key) {
-          var config = locationConfig[key];
-          var request = {
-            identifier : 'uuid',
-            tables : {},
-            order : [config.column]
-          };
-          request.tables[key] = {
-            columns : ['uuid', config.column]
-          };
-          
-          if (config.dependency) {
-            request.tables[key].columns.push(formatKeyId(config.dependency));
-          }
-          config.request = request;
-        });
-      }
-    
-      function lookupModel(key) { 
-        return locationStore[key].model || {};
-      }
-
-      // Search will only ever have to hit 4 elements, convenience method
-      function lookupDependency(currentKey) {
-        return locationIndex[currentKey];
-      }
-
-      function formatKeyId(key) {
-        var uuidSuffix = '_uuid';
-        return key.concat(uuidSuffix);
-      }
-
-      function generateTemplate(configLabel) { 
-        var config = namespace[configLabel]; 
-        var directiveStructure = '{{TEMPLATE_COMPONENTS}}';
-        var compile = '';
-
-        // Such meta templating
-        var componentStructure = 
-          '<div ng-class="{\'has-error\' : locationSelect.<%NAMESPACE%>.locationStore.<%CONFIGID%>.model.data.length===0}">' + 
-          '<label class="control-label" for="location-select-<%CONFIGID%>">' + 
-          '{{\"<%CONFIGLABEL%>\" | translate}}</label>' + 
-          '<select ng-disabled="locationSelect.<%NAMESPACE%>.session.locationSearch || locationSelect.<%NAMESPACE%>.locationStore.<%CONFIGID%>.model.data.length===0" ng-model="locationSelect.<%NAMESPACE%>.locationStore.<%CONFIGID%>.value" ng-options="<%CONFIGID%>.uuid as <%CONFIGID%>.<%CONFIGCOLUMN%> for <%CONFIGID%> in locationSelect.<%NAMESPACE%>.locationStore.<%CONFIGID%>.model.data | orderBy : \'name\'" ng-change=<%CONFIGCHANGE%> class="form-control" id="location-select-<%CONFIGID%>"></select>' + 
-          // '<span ng-if="locationSelect.<%NAMESPACE%>.locationStore.<%CONFIGID%>.model.data.length===0" class="glyphicon glyphicon-remove form-control-feedback"></span>' + 
-          '</div>'; 
-        var configurationList = Object.keys(config).reverse();
-        
-        configurationList.forEach(function (key) { 
-          var configObject = config[key];
-          var component = componentStructure;
-
-          var changeSubmit = lookupDependency(key) ? 
-            '\"locationSelect.<%NAMESPACE%>.fetchLocationData(\'' + lookupDependency(key) + '\', locationSelect.<%NAMESPACE%>.locationStore.' + configObject.id + '.value)\"' : 
-            '\"locationSelect.<%NAMESPACE%>.submitVillage(locationSelect.<%NAMESPACE%>.locationStore.' + configObject.id + '.value)\"';  
-
-          changeSubmit = changeSubmit.replace(/<%NAMESPACE%>/g, submitCallback);
-          
-          component = component.replace(/<%CONFIGID%>/g, configObject.id);
-          component = component.replace(/<%CONFIGLABEL%>/g, configObject.label);
-          component = component.replace(/<%CONFIGCOLUMN%>/g, configObject.column);
-          component = component.replace(/<%CONFIGDEPEND%>/g, lookupDependency(key));
-          component = component.replace(/<%NAMESPACE%>/g, submitCallback);
-          component = component.replace(/<%CONFIGCHANGE%>/g, changeSubmit);
-
-          compile = compile.concat(component);
-        });
-
-        return compile; 
-      }
-      
-      namespace.lookupModel = lookupModel;
-      namespace.fetchLocationData = fetchLocationData;
-      namespace.submitVillage = submitVillage;
-    }
-  };
-}]);
-*/
diff --git a/client/src/js/services/LocationService.js b/client/src/js/services/LocationService.js
index 14bdf6431b..22aa4c85e0 100644
--- a/client/src/js/services/LocationService.js
+++ b/client/src/js/services/LocationService.js
@@ -22,8 +22,8 @@ function LocationService($http, util) {
    * wrapper for HTTP requests made to the baseUrl endpoint
    * @private
    */
-  function request(path) {
-    return $http.get(baseUrl.concat(path))
+  function request(path, options) {
+    return $http.get(baseUrl.concat(path), options)
     .then(util.unwrapHttpResponse);
   }
 
@@ -31,8 +31,8 @@ function LocationService($http, util) {
    * fetch a list of villages from the server
    * @public
    */
-  function villages() {
-    return request('/villages');
+  function villages(options) {
+    return request('/villages', { params : options });
   }
 
 
@@ -40,16 +40,16 @@ function LocationService($http, util) {
    * fetch a list of sectors from the server
    * @public
    */
-  function sectors() {
-    return request('/sectors');
+  function sectors(options) {
+    return request('/sectors', { params : options });
   }
 
   /**
    * fetch a list of provinces from the server
    * @public
    */
-  function provinces() {
-    return request('/provinces');
+  function provinces(options) {
+    return request('/provinces', { params : options });
   }
 
   /**
@@ -68,7 +68,7 @@ function LocationService($http, util) {
    * @public
    */
   function location(uuid) {
-    return request('detail/'.concat(uuid));
+    return request('/detail/'.concat(uuid));
   }
 
   return service;
diff --git a/client/src/partials/locations/locations.html b/client/src/partials/locations/locations.html
index 507129d64b..a49f73f7b9 100644
--- a/client/src/partials/locations/locations.html
+++ b/client/src/partials/locations/locations.html
@@ -61,7 +61,6 @@ <h4>{{ 'LOCATION.MANAGER_CONFIGURATION' | translate }}</h4>
           {{ 'LOCATION.DESCRIPTION' | translate }}
           <b>{{ 'LOCATION.INFO_CREATE' | translate }}</b>,
           <b>{{ 'LOCATION.INFO_MODIFY' | translate }}</b>
-          {{ 'LOCATION.ET' | translate }}
           <b> {{ 'LOCATION.REMOVE' | translate }}</b>
           {{ 'LOCATION.LOCATION' | translate }}.
         </p>
diff --git a/client/src/partials/patients/registration/registration.html b/client/src/partials/patients/registration/registration.html
index 72d5d84581..23e7d4dda6 100644
--- a/client/src/partials/patients/registration/registration.html
+++ b/client/src/partials/patients/registration/registration.html
@@ -1,18 +1,18 @@
 <div class="flex-header">
   <div class="bhima-title">
-      
+
     <ol class="headercrumb">
       <li class="static">{{ "TREE.HOSPITAL" | translate }}</li>
       <li class="title">{{ "PATIENT_REG.PAGE_TITLE" | translate }}</li>
     </ol>
-    
+
   </div>
 </div>
 
 <div class="flex-content">
   <div class="container-fluid">
     <div class="row">
-      
+
       <!-- Patient Details Form -->
       <div class="col-md-7">
         <div id="patient-details" class="panel panel-primary">
@@ -20,9 +20,9 @@
           <div class="panel-body">
 
             <form name="details"  class="form-horizontal">
-              
+
               <!-- Last Name -->
-              <div 
+              <div
                 class="form-group has-feedback"
                 ng-class="{'has-error' : details.lastName.$invalid && details.$submitted}">
 
@@ -31,9 +31,9 @@
                   <input id="second-name" class="form-control" name="lastName" ng-model="PatientRegCtrl.medical.last_name" required>
                 </div>
               </div>
-              
+
               <!-- Middle Name -->
-              <div 
+              <div
                 class="form-group has-feedback"
                 ng-class="{'has-error' : details.middleName.$invalid && details.$submitted}">
 
@@ -42,9 +42,9 @@
                   <input id="middle-name" class="form-control" name="middleName" ng-model="PatientRegCtrl.medical.middle_name" required>
                 </div>
               </div>
-          
+
               <!-- First Name -->
-              <div 
+              <div
                 class="form-group has-feedback"
                 ng-class="{'has-error' : details.firstName.$invalid && details.$submitted}">
 
@@ -55,27 +55,27 @@
               </div>
 
               <!-- Hospital File Number -->
-              <div 
+              <div
                 class="form-group has-feedback"
                 ng-class="{'has-error' : details.hospitalNumber.$invalid && details.$submitted || details.$error.hospitalNumber}">
-                
+
                 <label for="new-hospital-number" class="col-md-3 control-label">{{ "INVOICE.HOSPITAL_FILE_NR" | translate }} </label>
                 <div class="col-md-9">
                   <input id="new-hospital-number" name="hospitalNumber" class="form-control" ng-model="PatientRegCtrl.medical.hospital_no" hospital-number required>
                   <span ng-if="details.$error.hospitalNumber" class="glyphicon glyphicon-remove form-control-feedback"></span>
                   <span ng-if="details.$pending.hospitalNumber"  class="glyphicon glyphicon-hourglass form-control-feedback"></span>
                   <!-- <p ng-if="details.$pending.hospitalNumber" class="help-block">Checking hospital number is unique...</p> -->
-                  
+
                   <!-- TODO Translate -->
                   <p id="hospitalNumber-alert" ng-if="details.$error.hospitalNumber" class="help-block">{{ "UTIL.PATIENT_EXIT" | translate }}</p>
                 </div>
               </div>
 
               <!-- Year of Birth -->
-              <div class="form-group" 
+              <div class="form-group"
                 ng-if="!PatientRegCtrl.fullDateEnabled"
                 ng-class="{'has-error' : details.yob.$invalid && details.$submitted}">
-                
+
                 <label for="yob" class="col-md-3 control-label">{{ "PATIENT_REG.YOB" | translate }}</label>
                 <div class="col-md-9">
                   <div class="input-group">
@@ -86,19 +86,19 @@
                   </div>
                 </div>
               </div>
-              
+
               <!-- Full date of birth -->
               <div class="form-group has-feedback"
                 ng-class="{'has-error' : details.dob.$invalid && details.$submitted}">
-                
+
                 <label for="patient-dob" class="col-md-3 control-label">{{ "PATIENT_REG.DOB" | translate }}</label>
                 <div class="col-md-9">
                   <input required name="dob" id="patient-dob" type="date" class="form-control" ng-disabled="!PatientRegCtrl.fullDateEnabled" ng-model="PatientRegCtrl.medical.dob" min="{{PatientRegCtrl.minDOB | date : 'yyyy-MM-dd'}}" max="{{PatientRegCtrl.maxDOB | date : 'yyyy-MM-dd'}}">
                 </div>
               </div>
-      
+
               <!-- Date of birth warning message -->
-              <div 
+              <div
                 id="date-error"
                 class="alert alert-danger"
                 ng-if="details.dob.$error.min || details.dob.$error.max">
@@ -118,39 +118,37 @@
                   <label class="radio-inline">
                     <input type="radio" name="genderOptions" id="female" value="F" ng-model="PatientRegCtrl.medical.sex" required>
                     {{ "PATIENT_REG.FEMALE" | translate }}
-                  </label>  
+                  </label>
                 </div>
               </div>
-  
+
               <!-- Seperate location settings -->
               <hr>
-            
+
               <!-- Location -->
-              <!-- TODO Each individual select should be a form group -->
               <div class="row">
                 <div class="col-md-6">
                   <h4>{{ "PATIENT_REG.ORIGIN_LOCATION" | translate }}</h4>
-                  <div location-select select-village="setOriginLocation"></div>
-
-                  <!-- Input model used to attach location village to the forms scope - this is purely used for validation purposes -->
-                  <!-- TODO Explain this clearly -->
-                  <input name="validateOriginLocation" ng-model="PatientRegCtrl.medical.origin_location_id" required hidden>
+                  <bh-location-select
+                    validation-trigger="details.$submitted"
+                    location-uuid="PatientRegCtrl.medical.origin_location_id">
+                  </bh-location-select>
                 </div>
-                
+
                 <!-- Seperate location searches given a certain screen size -->
                 <div class="visible-sm-block visible-xs-block"><hr></div>
-                
+
                 <div class="col-md-6">
                   <h4>{{ "PATIENT_REG.CURRENT_LOCATION" | translate }}</h4>
-                  <div location-select select-village="setCurrentLocation"></div>
-                  
-                  <!-- Input model used to attach location village to the forms scope - this is purely used for validation purposes -->
-                  <input name="validateCurrentLocation" ng-model="PatientRegCtrl.medical.current_location_id" required hidden>
+                  <bh-location-select
+                    validation-trigger="details.$submitted"
+                    location-uuid="PatientRegCtrl.medical.currency_location_id">
+                  </bh-location-select>
                 </div>
               </div>
-             
+
               <!-- Seperate finance settings -->
-              <hr> 
+              <hr>
 
               <!-- Debtor Group -->
               <div class="form-group has-feedback"
@@ -173,14 +171,14 @@ <h4>{{ "PATIENT_REG.CURRENT_LOCATION" | translate }}</h4>
 
         </div>
       </div>
-  
+
       <!-- Optional Information Form -->
       <div class="col-md-5">
         <div id="registration-type" class="panel panel-default">
           <div class="panel-heading">{{ "PATIENT_REG.OPTIONAL_INFO" | translate }}</div>
           <div class="panel-body">
             <form class="form-horizontal">
-                
+
               <div class="form-group">
                 <label for="title" class="col-md-3 control-label">Title</label>
                 <div class="col-md-9">
diff --git a/client/src/partials/templates/bhLocationSelect.tmpl.html b/client/src/partials/templates/bhLocationSelect.tmpl.html
new file mode 100644
index 0000000000..42fc0fa3b4
--- /dev/null
+++ b/client/src/partials/templates/bhLocationSelect.tmpl.html
@@ -0,0 +1,87 @@
+<!--
+  global "disable" allows external controller to disable the entire component
+  a child form is added for validation purposes, and to make the HTML easier
+  to read.
+-->
+<fieldset ng-disabled="$ctrl.disable" ng-form="LocationSelectForm">
+
+  <!-- allows a user to select a country -->
+  <div class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validationTrigger && LocationSelectForm.country.$invalid }"
+    >
+    <label class="control-label">{{ "LOCATION.COUNTRY" | translate }}</label>
+    <select
+      class="form-control"
+      ng-model="$ctrl.country"
+      name="country"
+      ng-options="country as country.name for country in $ctrl.countries track by country.uuid"
+      ng-change="$ctrl.loadProvinces()"
+      required>
+      <option value="" disabled>{{ $ctrl.messages.country | translate }}</option>
+    </select>
+  </div>
+
+  <!-- allows a user to select a province based on the selected country uuid -->
+  <div class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validationTrigger && LocationSelectForm.province.$invalid }"
+    >
+    <label class="control-label">{{ "LOCATION.PROVINCE" | translate }}</label>
+    <select
+      class="form-control"
+      ng-model="$ctrl.province"
+      name="province"
+      ng-options="province as province.name for province in $ctrl.provinces track by province.uuid"
+      ng-change="$ctrl.loadSectors()"
+      ng-disabled="$ctrl.disabled.province"
+      required>
+      <option ng-if="$ctrl.country" value="" disabled>{{ $ctrl.messages.province | translate }}</option>
+    </select>
+  </div>
+
+  <!-- allows a user to select a sector based on the selected province uuid -->
+  <div class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validationTrigger && LocationSelectForm.sector.$invalid }"
+    >
+    <label class="control-label">{{ "LOCATION.SECTOR" | translate }}</label>
+    <select
+      class="form-control"
+      ng-model="$ctrl.sector"
+      name="sector"
+      ng-options="sector as sector.name for sector in $ctrl.sectors track by sector.uuid"
+      ng-change="$ctrl.loadVillages()"
+      ng-disabled="$ctrl.disabled.sector"
+      required>
+      <option ng-if="$ctrl.province" value="" disabled>{{ $ctrl.messages.sector | translate }}</option>
+    </select>
+  </div>
+
+  <!-- allows a user to select a village based on the selected sector uuid -->
+  <div class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validationTrigger && LocationSelectForm.village.$invalid }"
+    >
+    <label class="control-label">{{ "LOCATION.VILLAGE" | translate }}</label>
+    <select
+      class="form-control"
+      ng-model="$ctrl.village"
+      name="village"
+      ng-change="$ctrl.updateLocationUuid()"
+      ng-options="village as village.name for village in $ctrl.villages track by village.uuid"
+      ng-disabled="$ctrl.disabled.village"
+      required>
+      <option ng-if="$ctrl.sector" value="" disabled>{{ $ctrl.messages.village | translate }}</option>
+    </select>
+  </div>
+
+  <!-- link to location create modal -->
+  <p class="text-right">
+    <a href="#/locations">
+      <span class="glyphicon glyphicon-link"></span>
+      {{ "LOCATION.REGISTER_LOCATION" | translate }}
+    </a>
+  </p>
+
+  <!-- validation messages shown on form errors-->
+  <p class="help-block text-danger" ng-messages="LocationSelectForm.$error" ng-show="$ctrl.validationTrigger">
+    <p ng-message="required">{{ "FORM.REQUIRED" | translate }}</p>
+  </p>
+</fieldset>
diff --git a/server/config/express.js b/server/config/express.js
index 0d8e44675c..28db042e1b 100644
--- a/server/config/express.js
+++ b/server/config/express.js
@@ -46,9 +46,8 @@ exports.configure = function configure(app) {
     next();
   });
 
-  // NOTE -- EXPERIMENTAL
-  // reject PUTs and POSTs with empty objects in the data
-  // property with a 400 error
+  // reject PUTs and POSTs with empty objects in the data property with a 400
+  // error
   app.use(function (req, res, next) {
     if (req.method !== 'PUT' && req.method !== 'POST') {
       return next();
@@ -67,7 +66,7 @@ exports.configure = function configure(app) {
   // provide a stream for morgan to write to 
   winston.stream = {
     write : function (message, encoding) {
-      winston.log('info', message.trim());
+      winston.info(message.trim());
     }
   };
 
diff --git a/server/config/routes.js b/server/config/routes.js
index 1252e7b1d7..b205e8af2c 100644
--- a/server/config/routes.js
+++ b/server/config/routes.js
@@ -15,7 +15,7 @@ var winston              = require('winston');
 var auth                 = require('../controllers/auth');
 var data                 = require('../controllers/data');
 var users                = require('../controllers/users');
-var locations            = require('../controllers/location');
+var locations            = require('../controllers/locations');
 var tree                 = require('../controllers/tree');
 var createPurchase       = require('../controllers/finance/purchase');
 var createSale           = require('../controllers/finance/sale');
diff --git a/server/controllers/locations.js b/server/controllers/locations.js
index c07193f1e9..c84f31f599 100644
--- a/server/controllers/locations.js
+++ b/server/controllers/locations.js
@@ -114,7 +114,8 @@ exports.countries = function countries(req, res, next) {
   'use strict';
 
   var sql =
-    'SELECT country.uuid, country.country_en AS name FROM country;';
+    'SELECT country.uuid, country.country_en AS name FROM country ' +
+    'ORDER BY country.country_en ASC;';
 
   db.exec(sql)
   .then(function (data) {