AngularJS + Restangular - Calling to .one() and .get() results in array?

Question

I am using Angular 1.0.8 along with Restangular for this. Since I am just starting out in js framework in general, a newbie-friendly explanation would be greatly appreciated.

I have a very simple HTML <section> like this (ng-app has been defined in body ):

<section class="comment-list block scrollable wrapper" style="height:350px" ng-controller="MessageStreamController">
    <div> {{ message.message }} </div>
    <div class="input-group">
        <input type="text" class="form-control" ng-change="change()" ng-model="message.message" placeholder="Input your comment here">
          <span class="input-group-btn">
            <button class="btn btn-primary" type="button" ng-click="clicked()">POST</button>
          </span>
    </div>
</section>

with the following <script>

var JApp = angular.module('JApp', ['restangular']);

JApp.controller('MessageStreamController', function($scope, Restangular) {
  var service = Restangular.all('message-stream');

  $scope.clicked = function() {
    $scope.message = service.one('index', 1).get();
  }
})

In the backend /message-stream/index/1 it simply returns

return json_encode(array(
    'message' => 'Hey there James',
    'user' => 'Terry'
));

This results in the <div> {{ message.message }} </div> and input gets rendered with 'Hey there James'. All good so far.

But then I can't edit the input box afterwards.

Some questions pointed out that this happens when you don't use ng-repeat, but then again I am expecting one JSON object from the backend.

Any pointer here to help?

UPDATE: Changed from Restangular to $resource fixes my problem. Though would love to know why this is happening. Answer from people who has experience with Restangular will be appreciated.

Answer 1

Restangular returns a promise from all queries which can not be edited.

Instead you should assign the actual result to your scope as per the answer to this question - Angular.JS: why can't the inputs be edited?