How to pre-insert data in the input field?

Question

Angular

Good day, you need to make a PUT request, for this, by pressing the edit button, I want the fields to be immediately filled with the already existing data and after that the user would edit them and send the modified version, but I can’t insert anything into the input tag

<div layout-gt-sm="row" ng-controller="PutCtrl">
        <md-input-container flex>
          <label>Name</label>
          <input type="text" ng-model="catName"/>
        </md-input-container>
            <md-input-container flex >
          <label>Color</label>
          <input type="text" ng-model="catColor"/>
        </md-input-container>
            <md-input-container flex >
          <label>Age</label>
          <input type="text" ng-model="catAge"/>
        </md-input-container>
            <md-button class="md-raised md-warn" ng-click="sendPut()">Change cat</md-button>
        </div>

app.controller('PutCtrl', function ($scope, $http) {
    $scope.putReq = function (url) {
        alert(url)
        $http({
            method: 'GET',
            url: url
        })
            .success(function (response) {
                $scope.ResponsePut = response;
                $scope.catName = ResponsePut.name;
                $scope.catColor = ResponsePut.color;
                $scope.catAge = ResponsePut.age;
            });
    };
    $scope.sendPut = function () {

    }
});

I also tried using value
<input type="text" value=" " ng-model="catName"/>
but it didn't work either.

Answer 1

You're assigning a response to $scope.ResponsePut , but then accessing the ResponsePut variable that doesn't exist in that scope

Answer 2

Once put in $scope.ResponsePut = response; -> so you need to take data from there -> $scope.catName = $scope.ResponsePut.name, but in order not to access through 3 dots in this case, you can just response.name. Put it in $scope if you later need this response outside of this function.