<!DOCTYPE html> <html ng-app="nestedForms" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nested Forms</title> <script src="../../Scripts/angular.js"></script> <script src="../../Scripts/angular-ui-router.js"></script> </head> <body> <script type="text/javascript"> var app = angular.module('nestedForms', ['ui.router']); app.config(function ($stateProvider, $urlRouterProvider) { $stateProvider.state('child', { template: '<ng-form name="childForm" ng-controller="childController"><input name="childInput" ng-model="childText" required /></ng-form>', controller: childController }); }); app.controller('mainController', mainController); app.controller('childController', childController); //Main Form Controller function mainController($scope,$state) { $scope.mainText = "Main Form Text"; $scope.loadView = function () { $state.go('child'); }; } //Child Form Controller function childController($scope) { $scope.childText = "Child Form Text"; } </script> <ng-form name="mainForm" ng-controller="mainController"> <input name="mainInput" ng-model="mainText" required /> <input type="button" value="Load Child View" ng-click="loadView()"/> <div>Main Form valid:{{mainForm.$valid}}</div> <section ui-view></section> </ng-form> </body> </html>