Different templates and scopes for form control

I'm new to Angular and development... and I want to do a register form. The register to be filled can be of autonomous or a company. When the page loads, it loads the autonomous form, but you can switch between the register forms by links above the form, one for autonomous and one for companies. Now the big question, how can i do it work with templates? Let's say that each type of register form is a template and when you click the links you switch the templates, hence I'll have to work in different scopes, because I'll have to validate the form data differently depending on the register type (that is, template). I want to do All this in a single view and controller (if possible). I don't quite know how to do it. Like I said, I'm a newcomer to Angular. I want to hear all the possibilities.

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Register</title>

    <style>
        .DivLeft {
            width: 48.6%;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 5px;
            float: left;
        }

        .DivRight {
            width: 48%;
            border-radius: 5px;
            background-color: #f2f2f2;
            padding: 5px 5px 5px 5px;
            float: left;
        }

        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            height: 2em;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #45a049;
        }

        .autonomous {
            width: 50%;
            margin: 0;
            float: left;
        }

        .autonomous:hover {
            background-color: #f2f2f2;
        }

        input[type=submit] {
            width: 100%;
            background-color: #45a049;
            color: white;
            padding: 14px 20px 28px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: #4CAF50;
        }

        a {
            text-decoration: none;
            color: white;
        }

        .typeLink {
            text-align: center;
            margin-bottom: 7%;
        }
    </style>
</head>

<body style="background-color: #6e6e6e">
    <div class="container">
        <h2 style="text-align: center; color: white;">
            Register Your Business
        </h2>
        <div class="typeLink">
            <div class="autonomous">
                <a href="#">Autonomous</a>
            </div>
            <div class="autonomous">
                <a href="#">Company</a>
            </div>
        </div>
        <div style="clear: both"></div>
        <div>
            <form id="BusinessRegister">
                <div style="margin-bottom: 10px">
                    <div class="DivLeft">
                        <input type="text" placeholder="EIN" ng-model="regData.corpEin" />
                    </div>
                    <div class="DivRight">
                        <input type="text" placeholder="Corporate Name" ng-model="regData.corpName" />
                    </div>
                    <div style="clear: both"></div>
                    <div class="DivLeft">
                        <input type="email" placeholder="E-mail" ng-model="regData.corpEmail" />
                    </div>
                    <div class="DivRight">
                        <input type="text" placeholder="Phone" maxlength="9" ng-model="regData.corpPhone" />
                    </div>
                    <div style="clear: both"></div>
                    <div>
                        <input type="submit" value="Register" />
                    </div>
                </div>
            </form>
        </div>
</body>

</html>

Thanks.

Solution

This can be done by using Angular's $routeProvider service:

NOTE: You can specify different controllers for different templates using controller:

yourapp.config(function($routeProvider){
    $routeProvider
    .when("/autonomous",{
        templateUrl: "autotemplate.html",
        controller: "autoController"
    })
    .when("/company",{
        templateUrl: "companytemplate.html",
        controller: "companyController"
    })

    .otherwise({
        redirectTo: "/autonomous"
    });
});

Here is an example on w3c: https://www.w3schools.com/angular/angular_routing.asp

In your html:

  <div class="typeLink">
        <div class="autonomous">
            <a href="#autonomous">Autonomous</a>
        </div>
        <div class="autonomous">
            <a href="#company">Company</a>
        </div>
    </div>

    <div ng-view>
        <!-- Template used will be replace here -->
    </div>