Angular (1.4) Design and layout - angularjs

Question

I couldn't think of a good title for this as I'm not 100% sure what to ask for plus this might be tricky without posting my whole application.
I'm new to angular, and want to create a site for holding recipes.
I'm using MVC and Web API and I have the basics together.
I want to make the recipe editing process a good user experience so want the user to be able to add an ingredient and edit and save it all without leaving the page.
At the moment I have an angular module and controller for the recipe editing, I want to have a sub-application to allow them to add and edit ingredients. I don't want them to have to navigate away.
What I need to know is a) the terminology. I'm thinking of the ingredient editor as a sub app, but is it just a sub controller?
and b) what is the pattern called? Master Detail View?
The following is my current "EditRecipeViewModel"
At the moment my newAddIngredient pushes an ingredient object into an array, this can then be edited and saved with saveNewIngredient, however this is nasty and doesn't work for editing the ingredient. I think I want the functionality for editing an ingredient encapsulated in a separate something, but is that a module a controller or what? maybe I'm trying to run before I can walk??
//edit recipe
//add ingredients
//add picture(s)
//confirm
//save
var editRecipeModule = angular.module('editRecipe', ['common'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when(CookBook.rootPath + 'recipe/edit', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/EditRecipe.html', controller: 'EditRecipeViewModel' });
$routeProvider.when(CookBook.rootPath + 'recipe/edit/confirm', { templateUrl: CookBook.rootPath + 'Templates/EditRecipe/ConfirmRecipe.html', controller: 'ConfirmRecipeViewModel' });
$routeProvider.otherwise({ redirectTo: CookBook.rootPath + 'recipe/edit/' });
$locationProvider.html5Mode({ enabled: true });
});
editRecipeModule.controller("EditRecipeViewModel", function ($scope, $window, viewModelHelper, validator) {
$scope.viewModelHelper = viewModelHelper;
$scope.editRecipeModel = new CookBook.EditRecipeModel();
$scope.newIngredient = new CookBook.IngredientModel();
$scope.ingredients = [];
var editRecipeRules = [];
var setupRules = function () {
editRecipeRules.push(new validator.PropertyRule("Name", {
required: { message: "Recipe name is required." }
}));
editRecipeRules.push(new validator.PropertyRule("Description", {
required: { message: "Please add a description." }
}));
editRecipeRules.push(new validator.PropertyRule("Method", {
required: { message: "All good recipes need a method." }
}));
}
var editIngredientRules = [];
var setupIngredientRules = function () {
editIngredientRules.push(new validator.PropertyRule("Name", {
required: { message: "Name is required" }
}));
editIngredientRules.push(new validator.PropertyRule("Amount", {
required: { message: "Amount is required" }
}));
editIngredientRules.push(new validator.PropertyRule("Unit", {
required: { message: "Unit is required" }
}));
}
$scope.confirm = function () {
validator.ValidateModel($scope.editRecipeModel, editRecipeRules);
viewModelHelper.modelIsValid = $scope.editRecipeModel.isValid;
viewModelHelper.modelErrors = $scope.editRecipeModel.errors;
if (viewModelHelper.modelIsValid) {
//save via web api
}
}
$scope.newAddIngredient = function () {
$scope.newIngredient = new CookBook.IngredientModel();
$scope.newIngredient.EditMode = true;
$scope.ingredients.push($scope.newIngredient);
}
$scope.saveNewIngredient = function() {
$scope.newIngredient.EditMode = false;
}
$scope.addIngredient = function () {
validator.ValidateModel($scope.newIngredient, editIngredientRules);
viewModelHelper.modelIsValid = $scope.newIngredient.isValid;
viewModelHelper.modelErrors = $scope.newIngredient.errors;
if (viewModelHelper.modelIsValid) {
$scope.ingredients.push($scope.newIngredient);
$scope.newIngredient = new CookBook.IngredientModel();
}
}
setupRules();
setupIngredientRules();
});
editRecipeModule.controller("ConfirmRecipeViewModel", function ($scope, $window, viewModelHelper) {
$scope.viewModelHelper = viewModelHelper;
//$scope.editRecipeModel = new CookBook.editRecipeModel();
});

Answer 1

Having done some more reading
I now know the answer is to use an additional controller to deal with that small part of the UI.
The key part i was missing was to put the controller to use in the HTML.
ng-controller="IngredientViewModel as ivm"
My HTML.
<div class="row" ng-controller="IngredientViewModel as ivm" ng-repeat="ingredient in ingredients">
<span class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Name" ng-change="newIngredientChanged()"></input>
<span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Name}}</span>
</span>
<span class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Amount"></input>
<span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Amount}}</span>
</span>
<span class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<input ng-show="ivm.ingredient.EditMode" ng-model="ivm.ingredient.Unit"></input>
<span ng-hide="ivm.ingredient.EditMode">{{ivm.ingredient.Unit}}</span>
</span>
<span class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<button ng-show="ivm.ingredient.EditMode" ng-click="ivm.save()">OK</button>
<button ng-hide="ivm.ingredient.EditMode" ng-click="ivm.edit()">Edit</button>
</span>
</div>
The controller..
editRecipeModule.controller("IngredientViewModel", function ($scope, $window, viewModelHelper, validator) {
var local = this;
local.ingredient = new CookBook.IngredientModel();
local.ingredient.Name = "bob";
local.ingredient.Amount = "100";
local.ingredient.Unit = "g";
local.ingredient.EditMode = true;
var editRules = [];
var setupRules = function () {
editRules.push(new validator.PropertyRule("Name", {
required: { message: "Name is required" }
}));
editRules.push(new validator.PropertyRule("Amount", {
required: { message: "Amount is required" }
}));
editRules.push(new validator.PropertyRule("Unit", {
required: { message: "Unit is required" }
}));
}
local.save = function () {
validator.ValidateModel(local.ingredient, editRules);
viewModelHelper.modelIsValid = local.ingredient.isValid;
viewModelHelper.modelErrors = local.ingredient.errors;
if (viewModelHelper.modelIsValid) {
local.ingredient.EditMode = false;
}
}
local.edit = function () {
local.ingredient.EditMode = true;
}
setupRules();
});