Angular.js cascading dropdown - mapping two models - asp.net-mvc

Question

I currently am struggling with mapping the value of a cascading dropdown -
with data driven by a tree constructed by an angular controller - to a primitive
string for posting back to a MVC controller.
I have a tree of data to populate the cascading dropdown, with the basic format of
public class Series
{
public string Text { get; set; }
public virtual ICollection<Depth> Depths { get; set; }
}
public class Depth
{
public int Id { get; set; }
public double Value { get; set; }
public string Text { get; set; }
}
Which is then mapped using angular to the output, which is an MVC type model:
public class LineItemViewModel
{
public string Series { get; set; }
public double Depth { get; set; }
}
Using an angular controller, where joistGroup is a list of series populated on controller creation.
HTML:
<div class="initialRow row"
ng-repeat="joist in floor.Joists">
<select name="series" class="form-control"
data-ng-model="series"
data-ng-options="s as s.Text for s in joistGroup.Series"
data-ng-change="joist.Series = series.Text">
<option></option>
</select>
<select name="depth" class="form-control"
data-ng-model="depth"
data-ng-options="d as d.Text for d in series.Depths"
data-ng-change="joist.Depth = depth.Value;"
data-rule-required="true">
<option></option>
</select>
</div>
Angular controller:
var app = angular.module('MaterialListModule', []);
app.controller('MaterialListController', function($scope, $filter, $http) {
$scope.getMaterialList = function() {
$http.get('url for get call')
.success(function(data, status, headers, config) {
$scope.Model = data;
});
}
$scope.getProducts = function (productSource) {
$http.get('url for get')
.success(function (data, status, headers, config) {
$scope.allItems = data;
$scope.joistGroup = $filter('filter')($scope.allItems, { Text: 'Joists' }, true)[0];
}).finally(function() {
$scope.getMaterialList();
});
}
$scope.getProducts("All");
});
Currently I am using ng-change to trigger an update of the primitive for posting back
to the MVC controller, but as this is both a create and edit page this doesn't work
for when I already have a selected series. I am thinking I can get it working by ng-init
but haven't had any success.
Can anyone point me in the direction of best practices to map a complex model for
cascading dropdowns to a primitive and back?

Answer 1

Instead of writing your ng-change inline, hook it up to a function. In that function, you can then access the 'complex object' and do whatever you want to do with it.
$scope.depthChange = function() {
$scope.myPrimitive = $scope.depth.Value;
//Do something with primitive
}
Also, when you have something already selected, on initialisation/retrieval of the data, just set the $scope.depth to the complex object that should be selected