I cannot assign my result of my api request to the view in AngularJS

Question

This is only a portion of my code. For some reason I can assign vm.print to my response, it does not show. However, when I console.log() the response, it appears in the console. Please help. I can assign vm.print to any string outside of the app.model.predict(){} function but when I assign it inside the function, it does not show up in the view , but only shows up in the console.

 <main class="app container" ng-controller="webcamController as vm">
    <div class="row">
        <div class="col-md-12" style="text-align: center">
            <ng-webcam config="vm.config"
                       on-error="vm.onError(err)"
                       on-load="vm.onLoad()"
                       on-live="vm.onLive()"
                       on-capture-progress="vm.onCaptureProgress(src, progress)"
                       on-capture-complete="vm.onCaptureComplete(src)"></ng-webcam>
        </div>
        <div class="col-md-12">
            <p id="progress">Progress: {{vm.progress}}%</p>
        </div>
        <div class="col-md-12 buttons" ng-if="vm.showButtons">
            <button class="btn btn-primary" type="button" ng-disabled="!vm.captureButtonEnable" ng-click="vm.capture()">Capture</button>
            <button class="btn btn-primary" type="button" ng-click="vm.off()">Camera off</button>
            <button class="btn btn-primary" type="button" ng-click="vm.on()">Camera On</button>
        </div>
    </div>
    <div id="result" class="row"></div>
    <!-- Displays analysis -->
    <!--<div ng-repeat="x in analysis">
    <h3>Example heading <span class="label label-default">{{x.name}}</span></h3>
    </div>-->
    <div class="text-center">{{vm.print}}</div>

</main>


<script>
   vm.test(src);

   vm.test = function(src) {


    //converts to string
    var uri = src.toString();
    //String manipulation
    uri = uri.slice(23, uri.length);

    var app = new Clarifai.App(
      'kS3D7ofjZQYiyr_7uET1IemaxIzmnmK3vbX4Vhwt',
      'lvhKWZx9bMY1L0OMVmo9bMr9A9_PyCRgmP2FGvEJ'
    );

    //This message will show up
    vm.print = "Default message";

    // predict the contents of an image by passing in a url
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: uri}).then(
    function(response) {

    //str returns a string
    var str = response.request.response;
     //converting string to json
    var json = JSON.parse(str);
    //returns result
    console.log(json.outputs[0].data.concepts[0].name);
    //this does not show up in the view
    vm.print = json.outputs[0].data.concepts[0].name;
    },
      function(err) {
      console.error(err);
      vm.print = "Opps, something went wrong :(   " + err;
    }
    );

};


</script>

This is only a portion of my code. It will not run in the console. I just need to someone to look at the syntax who is more familiar with angularjs and the clarifai api. thanks.

Answer 1

I'm not familiar with the library that you're using when you execute Clarifai.App, but I'm guessing it's not an Angular lib, so it probably just doesn't run the digest cycle automatically for you in the promise resolve (.then() callback)

You have to do it yourself. Try to inject thr $scope service, and run the $scope.$apply() method, like this:

app.controller('webcamController', function ($scope) {
    /* ... */
    app.models.predict(Clarifai.GENERAL_MODEL, {base64: uri}).then(
        function(response) {
            /* ... */
            vm.print = json.outputs[0].data.concepts[0].name;
            $scope.$apply();
        });
})