html file coming up with 2 controls

I have a app.js file where i have defined some routes using angular, and in app.js i am calling some html files. When i run teh file, it is loading up with 2 controls. Menas i have got login form where i have defined 2 textbox and 1 submit button, but when i run the file, it comes up with 2 controls.

Below is my login.html file:

![<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
<form  ng-app=""  ng-controller="validateCtrl"
       name="loginForm" novalidate>

<p>UserName:<br>
    <input type="text" name="uName" ng-model="uName" required>
  <span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
  <span ng-show="loginForm.uName.$error.required">Username is required.</span>
  </span>
</p>

<p>Password:<br>
    <input type="text" name="pwd" ng-model="pwd" required>
  <span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
  <span ng-show="loginForm.pwd.$error.required">Password is required.</span>
  </span>
</p>

<p>
    <input type="submit" ng-click="popupuser()"
           ng-disabled="loginForm.pwd.$dirty && loginForm.pwd.$invalid ||
               loginForm.uName.$dirty && loginForm.uName.$invalid ">
</p>

</form>
</body>
</html>][1]

app.js:

angular.module('test', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('register', {
                url: '/register',
                templateUrl: '../partials/register.html',
                controller: 'registration'
            });
        $stateProvider.state('login',{
            url: '/login',
            templateUrl: '../partials/login.html',
            controller: 'login'
        });

        $urlRouterProvider.otherwise('/');
    })

Well this should be a "partials" file, but looks like a complete html file. The biggest problem seems to be the ng-app attribute, since that is probably already defined on your index.html file you get two ng-app attributes!

You need to think of your login html file as something that will be inserted into another html file.

You should write your login html file like this instead:

<form  ng-controller="validateCtrl"
   name="loginForm" novalidate>

<p>UserName:<br>
  <input type="text" name="uName" ng-model="uName" required>
  <span style="color:red" ng-show="loginForm.uName.$dirty && loginForm.uName.$invalid">
    <span ng-show="loginForm.uName.$error.required">Username is required.</span>
  </span>
</p>

<p>Password:<br>
  <input type="text" name="pwd" ng-model="pwd" required>
  <span style="color:red" ng-show="loginForm.pwd.$dirty && loginForm.pwd.$invalid">
    <span ng-show="loginForm.pwd.$error.required">Password is required.</span>
  </span>
</p>

<p>
  <input type="submit" ng-click="popupuser()"
       ng-disabled="loginForm.pwd.$dirty && loginForm.pwd.$invalid ||
           loginForm.uName.$dirty && loginForm.uName.$invalid ">
</p>

</form>