AngularJS: Change input value with server data when page loads

Question

Sorry if this was already asked, but I really didn't find anything that applies exactly to my problem.

Well, although I know that an AngularJS form value must be loaded from controllers and that I can create routes and RESTful resources with AngularJS, I am using Python and Flask to get the page and data but AngularJS to post data to the server. The problem is, when I put "ng-model" within a text input, the value from server is ignored, like so:

<input type="text" ng-model="first_name" value={{user.first_name}}>

is interpreted as:

<input type="text" ng-model="first_name" value="John" class="ng-pristine ng-valid">

but the value cannot be seen, as if there is no "value" attribute.

Given that situation, I tried to use directives, but I didn't realise how to get this server data and share it with another scope.

What I want is to simply load a page with server data inside a ng-model input and access it through controller methods later ("placeholder" is useless here).

I am sending the page like this:

class ShowUser(MethodView):
    def get(self):
        s = Session(request)
        if s.is_logged():
            user = dict({'username': s.user.username, 'first_name': s.user.first_name, 'last_name': s.user.last_name,
                         'email': s.user.email, 'logged': True})
            return render_template('users/show-user.html', user=user)
        else:
            user = dict({'username': 'null', 'logged': False})
            return render_template('index.html', user=user)

It's that "user" variable in "render_template" that I am trying to access.

Answer 1

If you are not going to the server, you can write an angular .value() in the page (I assume {{ }} is from your SERVER-side templating here, NOT Angular's):

<script>
angular.module('app').value('User', {{user}});
</script>

better example, in EJS, you could have:

<script>
angular.module('app').value('User', <%= JSON.stringify(user) %>);
</script>

This must be placed anywhere AFTER the .js that contains your initial angular.module('app', [...])

Then inject User in your controller and scope;

angular.module('app')
  .controller('AppController', ['$scope', 'User',
    function($scope, User) {
      $scope.user = User;
    }
    ]);

Finally, in your HTML:

<input type="text" ng-model="user.first_name" />