Angular object not binding - angularjs

Question

I have the following issue. I have 2 controllers defined for 2 separate functions.
The 1st controller handle my login and the second 1 handles forgot password.
Login controller binds well but forgot password controller does bind but not the object.
Controllers
var singlePageApp = angular.module('SinglePageApp',[]);
singlePageApp.controller('LoginController', function ($scope, $location, $window) {
$scope.isFormValid = false;
$scope.message = null;
$scope.login = null;
// Login object
$scope.Login = {
Email: '',
Password: '',
};
//check form validation
$scope.$watch('LoginForm.$valid', function (newValue) {
$scope.isFormValid = newValue;
});
$scope.submitForm = function () {
console.log('Form is submitted with:', $scope.login);
...
};
});
singlePageApp.controller('ForgotPasswordController', function ($scope, $location, $window) {
$scope.message = null;
$scope.password = null;
// Password object
$scope.Password = {
Email: '',
};
$scope.$watchGroup(['password', 'Password'], function (newValues, oldValues, scope) {
console.log(newValues);
});
$scope.forgotPassword = function () {
};
});
Login HTML
<div ng-controller="LoginController">
<form class="form-signin mt10" name="LoginForm">
<h2 class="form-signin-heading pwc">Please login</h2>
<div class="login-wrap">
<input ng-model="login.Email" id="tbEmail" name="Email" type="email" class="form-control" placeholder="Email" autofocus required>
<span class="error" ng-show="LoginForm.Email.$touched && LoginForm.Email.$error.required">Email is required</span>
<input ng-model="login.Password" id="tbPassword" name="Password" type="password" class="form-control" placeholder="Password" required>
<span class="error" ng-show="LoginForm.Password.$touched && LoginForm.Password.$error.required">Password is required</span>
<label class="checkbox">
<span class="pull-right">
#* Forgot Password?*#
Forgot Password?
</span>
</label>
<div class="clearfix"></div>
<button id="btnloginAdmin" type="button" ng-click="submitForm()" ng-disabled="LoginForm.$invalid && !!LoginForm.$error.email" class="btn btn-success btn-block">Login</button>
<div class="text-center">
<label style="color: red;" id="lblError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
</form>
</div>
HTML Modal
<div ng-controller="ForgotPasswordController">
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="modalForgotPassword" class="modal fade">
<div class="modal-dialog">
<div class="modal-content" ng-form="fgForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="email" name="Email" ng-model="password.Email"
placeholder="Email" autocomplete="off"
class="form-control placeholder-no-fix" required>
<span class="error" ng-show="fgForm.Email.$touched && fgForm.Email.$error.required">Email is required</span>
<div class="text-center">
<label style="color: red;" id="fError" class="hasError-label clearfix">{{message}}</label>
<div class="error error-red"></div>
</div>
</div>
<div class="modal-footer">
<a href="javascript:;" class="btn btn-success" ng-disabled="fgForm.$invalid && !fgForm.$error.email" ng-click="forgotPassword();">
<i class="fa fa-check"></i> | Submit
</a>
<a href="javascript:;" class="btn btn-danger" data-dismiss="modal">
<i class="fa fa-times"></i> | Cancel
</a>
</div>
</div>
</div>
</div>
I have tried changing to bind to a single object 'password' but it states its undefined. Then I changed it to 'Password.Email' but then it stays empty.
The 2 controllers are bind on the same page so not sure if that is the issue.
Thank you in advance.