Ng-Controller Not Passing Data - angularjs

Question

I'm an angular newbie and am working on a small project and have come across a weird problem with ng-controller. When I use the controller within my partial view, the customer's name does not get passed into the value property.
However, if I inject the customersFactory (which has a function that makes an http request to the database to get all customers) into the ordersController, everything works fine.
My routeProvider code:
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'ordersController',
templateUrl: 'partials/orders.html'
})
.when('/customers', {
controller: 'customersController',
templateUrl: 'partials/customers.html'
})
.otherwise({
redirectTo: '/'
})
});
myApp.factory('ordersFactory', function($http) {
var orders = [];
var factory = {};
factory.getOrders = function(callback) {
$http.get('/orders').success(function(data) {
orders = data;
callback(orders);
})
}
factory.addOrder = function(data) {
return $http.post('/add/order', data);
}
factory.deleteOrder = function(id) {
return $http.delete('/delete/order/' + id);
}
return factory;
});
myApp.factory('customersFactory', function($http) {
var customers = [];
var factory = {};
factory.getCustomers = function(callback) {
$http.get('/customers').success(function(data) {
customers = data;
callback(customers);
})
}
factory.addCustomer = function(data) {
return $http.post('/add/customer', data);
}
factory.removeCustomer = function(customer_id) {
return $http.delete('/delete/customer/' + customer_id);
}
return factory;
});
myApp.controller('ordersController', function($scope, ordersFactory) {
var getOrders = function() {
ordersFactory.getOrders(function(data) {
$scope.orders = data;
});
}
getOrders();
$scope.addOrder = function() {
console.log($scope.order);
ordersFactory.addOrder($scope.order);
$scope.order = {};
getOrders();
}
$scope.deleteOrder = function(id) {
ordersFactory.deleteOrder(id);
getOrders();
}
});
myApp.controller('customersController', function($scope, customersFactory) {
var getCustomers = function() {
customersFactory.getCustomers(function(data) {
$scope.customers = data;
})
}
getCustomers();
$scope.addCustomer = function() {
customersFactory.addCustomer($scope.customer);
$scope.customer = {};
getCustomers();
}
$scope.removeCustomer = function(customer_id) {
customersFactory.removeCustomer(customer_id);
getCustomers();
}
});
Here's the orders.html partial page.
<h2>Add New Order</h2>
<form>
<label for="name">Customer</label>
<select name="name" ng-model="order.name" ng-controller="customersController">
<option ng-repeat="customer in customers" value="{{customer.name}}">{{ customer.name }}</option>
</select>
<label for="quantity">Order</label>
<select name="quantity" ng-model="order.quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="product" ng-model="order.product">
<option value="Nike Shoes">Nike Shoes</option>
<option value="Black Belts">Black Belts</option>
<option value="Ice Creams">Ice Creams</option>
<option value="Candies">Candies</option>
<option value="Waffles">Waffles</option>
</select>
<input type="submit" value="Order" ng-click="addOrder()">
</form>
<table>
<thead>
<tr>
<td>Customer Name</td>
<td>Product</td>
<td>Quantity</td>
<td>Date</td>
<td>Action</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders">
<td>{{ order.name }}</td>
<td>{{ order.product }}</td>
<td>{{ order.quantity }}</td>
<td>{{ order.date }}</td>
<td>Remove</td>
</tr>
</tbody>
</table>
Can anyone please explain why this is the case? My initial guess is that it has something to do with not explicitly assigning $scope.customers but I am under the impression that as soon as ng-controller is detected, it executes all of the "self-executing functions" which would then assign the data to $scope.customers. Thanks in advance.

Answer 1

Use ng-model in place of value and instead of <option> tag use ng-options in select tag it is fast as compare the <option> tag
<select name="name" ng-model="order.name" ng-controller="ordersController" ng-options="customer as customer in customers" />

Answer 2

Use the ngOptions directive instead. The documentation can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
<select name="name" ng-model="order.name" ng-options="customer as customer.name for customer in customers track by customer.name" ng-controller="ordersController">

Answer 3

Try ng-model="customer.name" instead of value="{{customer.name}}"

Answer 4

Thanks so much for your feedback. I think I've figured out the root of my issue(s).
I am not using ng-options to iterate over an array full of objects.
I am calling the ordersController in the routeProvider but am overriding it with customersController which is causing ng-model="order.name" to not be passed into the scope.
Any pointers on what I can do to fix #2? Does "ng-controller='customersController' have to come before the tag in order for "ng-options" to display the options correctly?