How to pass data from controller javascript to view javascript in AngularJS?

Question

I am developing an application in angularJS. I get data from a rest service in the controller. And then I pass that data to the view using $scope. In my view, there is an inpage javascript (I know its a bad practice) and I want to used the data passed in my inpage javascript. Simply using the variable name or {{variable_name}} doesnt work. Can any one give any suggestions?

Here is my code snipper from controller:

 $scope.requests = null;

  var url = 'my_url';

    $http.get(url).then(function(response) 
        {
          $scope.requests = response.data;


       if (response.data.status && response.data.message)
         {
            var status = response.data.status + '!'; 
            var message = response.data.message;

             showAlert(status,message);


          }

      return;

        }).catch(function(response) 
        {

          showAlert('danger!','Some error occured. Please try again.');
        });

And here is my inpage javascript code:

<script>
$(document).ready(function() { 

    /*
                date store today date.
                d store today date.
                m store current month.
                y store current year.
            */
            var date = new Date();
            var d = date.getDate();
            var m = date.getMonth();
            var y = date.getFullYear();

            /*
                Initialize fullCalendar and store into variable.
                Why in variable?
                Because doing so we can use it inside other function.
                In order to modify its option later.
            */

    $('#calendar').fullCalendar({
        // put your options and callbacks here
             header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
        },
            defaultView: 'month', 
            /*
                    selectable:true will enable user to select datetime slot
                    selectHelper will add helpers for selectable.
                */
            selectable: false,
            selectHelper: false,







                /*
                    editable: true allow user to edit events.
                */
                editable: false,
                /*
                    eventStartEditable: false doesnt allow the dragging of events
                */
                eventStartEditable: false,

                /*
                eventOverlap: false doesnot allow overlapping of events
                */
                eventOverlap: false,
                /*
                    events is the main option for calendar.
                    for demo we have added predefined events in json object.
                */

    /*  var events = requests.map(function(obj, index)
                {
                if (obj.accepted == 'no' ) return false;
                return { id : obj.id, start : obj.start, end : obj.end }
                })*/




}); 
});
</script>

<div id='calendar'></div>

Using {{requests}} prints out the data but it CAN NOT be used within the <script> </script> tags. I want to use it with the script tags

Answer 1

In angular you want to include the $window service in your controller, then set a variable on the $window object. The script tag can then check for window. requestsVariable . You are going have to handle the asynchronous nature of the request though, since the request variable will be empty till the request returns.

Further, as andrew.butkus pointed out, you probably don't want to do this. The jquery code could be simplified if you moved it into the linking function of an angular directive for the calendar, IMO.

Answer 2

Declare a global variable as var gloable; outside the controller and inside the controller assign whatever value you want to the declared global variable and then later you can access it inside your Jquery onready function.