$scope does not call inside function

Question

$scope does not call inside function

Right now we are facing an issue in a controller that calls a DataService (Parse), the problem is that this code does not work:

    function MainCtrl($scope, DataService, $location)
{

    $scope.actionList = function() {

            // Call the service and fetch the list of signatures that match the given action ID
            DataService.getActions(function (results) {
                $scope.$apply(function () {
                    // Apply the results to the signatureList model so it will refresh the table in the view
                    $scope.actionList = results;
                });
            });

    };
}

I put a breakpoint in the DataService line but it doesn't get hit, but if I implement the Ctrl in this way it does get call and It works!!:

function MainCtrl($scope, DataService, $location)
{            

                // Call the service and fetch the list of signatures that match the given action ID
                DataService.getActions(function (results) {
                    $scope.$apply(function () {
                        // Apply the results to the signatureList model so it will refresh the table in the view
                        $scope.actionList = results;
                    });
                });          

    }

Any idea why is this happening??

Apart from that once is working (with the second implementation) I would like to show a property of the activity, if I try to get the property like this it does not work:

<div id="wrapper"><div id="scroller">
<div ng-controller="MainCtrl">
    <ul id="thelist">
        <li ng-repeat="action in actionList">{{action.get('Action')}}</li>  
    </ul>
</div> 
</div></div>

But if I try to get the whole object like {{action}} I can actually see all the entries.

javascript
angularjs
javascriptmvc

Answer 1

Change the controller to

function MainCtrl($scope, DataService, $location) {

    $scope.getActionList = function() {
        DataService.getActions(function(results) {
                    $scope.$apply(function() {
                                $scope.actionList = results;
                            });
                });

    };

    $scope.getActionList();
}

Then if you want to reload actionList call getActionList()

Answer 2

Any idea why is this happening??

In your first example, you are simply defining a function named actionList on object $scope. Defining a function won't execute it (see @Arun's answer).

To show your data in the view, you can use normal JavaScript dot notation. If an action object looks like this:

{ prop1: 'property 1', prop2: [1, 2], prop3: { name: 'Javito'} }

You could write the view/HTML as follows:

<ul id="thelist">
   <li ng-repeat="action in actionList">
      prop1: {{action.prop1}}<br>
      prop2: {{action.prop2[0]}} {{ action.prop2[1] }}<br>  <!-- or use another ng-repeat here -->
      prop3.name: {{action.prop3.name}}
   </li>  
</ul>