Get value from HTML page to angularJS file

var firstName = $scope.testName

<input ng-model="testName" />

testName is the ng-model name that you have give. It will be automatically binded to your controller. No need the get the value using document.getElementById

Wrong usage , why ng-model in <p> tag??

Update

Change your fiddle with the following code, it will work. Also make sure framework is selected properly (as in the image)

<div ng-app ng-controller="testController">
    <input ng-model="testDataName" ng-change="check()" /> {{testDataName}}
    After ng-change : {{checkName}}
</div>

 function testController($scope) {
    $scope.testDataName="Dummy Name";
    $scope.check = function () {
        $scope.checkName=$scope.testDataName;
        console.log($scope.checkName);
    };
}

its a text node, you will require .innerHTML or '.innerText', .value is for form inputs

 var firstname = (document.getElementById("txtFirstName").innerHTML);

and don't use ng-model on a p element, change it to like this

<p class="contact_display" id="txtFirstName">{{testName}}</p>

just use $scope.testName to get the value, no need for firstname = (document.getElementById("txtFirstName").innerHTML); querying DOM for value is jQuery style, use angular the $scope for 2 way bindings

Read more at official doc

Update here is updated function on loginCtrl

.controller('loginCtrl', ['$scope', function ($scope) {
     $scope.testNameData = 'Satya';
     $scope.doLogin = function() {
        alert($scope.testNameData);
     };
}])

If you really want to go jQuery way here is what you can do, its not recommended, you should use angular directive to do DOM manipulation

$scope.showUserPro = function() {

    $ionicLoading.show();

    // Here i need the value of <p tag>
    var name = document.getElementById("txtFirstName"),
        firstNameFromHtmlPtag = name.innerText;

    console.log(firstNameFromHtmlPtag, 'Doing API Call 1');

}