how to pass values from localStorage to input field

Question

I'm trying to pass localStorage to input field, but i'm not able to pass the values, i not getting where i'm going wrong, please help me with this, 1 thing more how can i call the angularjs function outside the controller. thanx for any help guys.

html

<div class="modal__content" ng-controller="joinctrl">
        <form novalidate>
        <input type="email" placeholder="Email" ng-model="email"><br />
        <input type="password"  placeholder="Password" ng-model="password"><br />
        <input type="password"  placeholder="Confirm Password" ng-model="cpassword"><br />
        <input type="submit" value="Create" class="creat" ng-click="create()">
        </form>
</div>

js

preauth();
function preauth() {
    var user_login = window.localStorage.getItem('email');
    var pass_login = window.localStorage.getItem('password');
    if(user_login != undefined && pass_login != undefined) {
        alert(user_login);
        document.getElementById("email").value=user_login;
        document.getElementById("password").value=pass_login;
        angular.element(document.getElementById('loginctrl')).scope().Login();
    }
}
var app = angular.module('contol', ['onsen']);

app.controller('loginctrl', function($scope, $http){
    $scope.login=function(){
        if (!$scope.email || !$scope.password){
            alert("Please Fill Email & Password");
        }
        else{
            var request=$http({
                method:"post",
                url:"http://www.example.com/login.php",
                dataType: "json",
                data:{
                    email:$scope.email,
                    password:$scope.password
                },
                headers:{'Content-Type':'application/x-www-form-urlencoded'}
            });
        request.success(function(retmsg){
            if(parseInt(retmsg.status)==0)
            {
                alert(retmsg.txt);
            }
            else if (parseInt(retmsg.status)==1)
            {
                window.localStorage.setItem('email', $scope.email);
                window.localStorage.setItem('password', $scope.password);     
                myNavigator.pushPage('home.html');
            }
        });
        }
    };
});

Answer 1

This may be useful,store it in variable and use it and only id name not #password

 var x = document.getElementById("password").value = "Password";
 alert ("The value was changed to: " + x);

Answer 2

In Angular applications, you should write ALL code inside modules. Otherwise, you don't use one of the useful feature of Angular: modularity.

For example:

app.factory("LocalStorage", function() {
    var LS = {};
    LS.getItem = function(key) {
        return localStorage[key];
    };
    LS.setItem = function(key, value) {
        localStorage[key] = value;
        return value;
    };

    return LS;
});
app.controller('loginctrl', function($scope, $http, LocalStorage) {
    $scope.email = LocalStorage.getItem('email');
    $scope.password = LocalStorage.getItem('password');

    $scope.login = function() {
        // code...
        // I'd rather to create another service "Api" or "Request", like this:
        return Api.doAuth($scope.login, $scope.password).then(function(res) {
            // For example, service `Request` write to `LocalStorage` status of current authentication.
            if(res) {
                myNavigator.pushPage('home.html');
            }
        });
    };
});

You should not to call function in outside application (it's incorrect from the point of view Angular's philosophy). However, it's possible, you wrote right:

// get our scope:
var scope = angular.element(document.getElementById('loginctrl')).scope();
// and call our function in the scope:
scope.login();

But it's code you need to execute after Angular's bootstrap. Also, you may to execute any function with Angular's services.

//find the `ng:app` element and get injector.
var injector = angular.element('body').injector();
//execute our own function with any services
injector.invoke(function($rootScope, $http, LocalStorage) {
    $http.get('/foo.php').then(function(res) {
        LocalStorage.setItem('answer', res);
    });
    $rootScope.bar = 1;

});