Issue in simple angularjs SPA - angularjs

Question

I have written a simple SPA(Single Page Application) with a username/password and submit button on top. When user is successfully logged in , according to his role , he should see details(employeeid , designation etc) on the rest(bottom) of the page.My Problem is that the bottom part of the page gets loaded even before user is logged in . So when user submits the login credentials , the bottom of the page is not getting reloaded with the data I have fetched from the server.
To be precise in my below code u1.UserDetails.firstName , u1.UserDetails.designation and u1.UserDetails.employeeId should be reloaded after user submits the login credential. But it's not happening currently and I get a blank screen. Can anyone please help me. I know I am missing something very silly here. I am sorry for that as I am new to UI development.
index.html
(body of my html page)
<div class="navbar navbar-inverse">
<form class="form-inline" ng-submit="submitLoginData()" ng-controller="LoginController">
<div class="form-group">
<!-- <label class="sr-only" for="exampleInputEmail2">Email address</label> -->
<input type="email" class="form-control" placeholder="Enter email" ng-model="emailId"/>
</div>
<div class="form-group">
<!-- <label class="sr-only" for="exampleInputPassword2">Password</label> -->
<input type="password" class="form-control" placeholder="Password" ng-model="password"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<!-- <button type="submit" class="btn btn-default">Sign in</button> -->
<input type="submit" class="btn btn-default" id="SignIn" value="Sign In">
</form>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2">
<img ng-src="{{imageSource}}" class="img-thumbnail">
</div>
<div class="col-lg-10" >
<table ng-table="tableParams" class="table">
<tr>
<td >
{{u1.UserDetails.firstName}}
</td>
<td>{{u1.UserDetails.designation}}
</td>
<td>{{u1.UserDetails.employeeId}}</td>
</tr>
</table>
</div>
</div>
</div>
controller.js
myApp.controller('LoginController' ,
['$scope','LoginService' ,'$http' , function($scope , LoginService, $http ){
$scope.submitLoginData = function(LoginService) {
var tempStr= "userName:" +$scope.emailId + ", password:" + $scope.password ;
$http.get('http://localhost:8181/RestCXF7/services/UserInfo/1').
success(function(data , status , headers, config) {
alert("Http service" + data);
$scope.u1 = data;
$scope.imageSource = 'img/tests.JPG';
}).
error(function (data, status, headers, config) {
alert("error" + status);
});
};
}]);

Answer 1

You need to wrap all elements with the ng-controller div.
Only child elements inside the controller's directive get's it's scope:
The problem with your code is that only the form contents gets the right scope.
<div ng-controller="LoginController">
<div class="navbar navbar-inverse">
<form class="form-inline" ng-submit="submitLoginData()">
<!-- more -->
</form>
</div>
<div class="container">
<div class="row">
<!-- the code below -->
</div>
</div>
</div>
UPDATE:
I created a demo plunker with jade: http://plnkr.co/edit/FNk45ekzeT1xBaphKrjp?p=preview