Re render content in angular
Question: I am using angular for front end and Python-Django as backend . I am rendering
an HTML in python using `TemplateResponse()` and this response is then sent to
angular as response where I store this in some `$scope variable` . The
important thing here is The HTML I am rendering in PYthon includes Css, Js ,
HTML + Angular code . e.g.,

    
    
    <div  ng-repeat='val in values'> 
      <span>{{ val }}</span>
    </div>
    

Now Python will render this code (includes much more but this a sample) and
send response to angular (I'll also send this values data from python )where
I'll store this in $scope.

    
    
    $scope.html_response = response sent from Python
    $scope.values = values data from python  (it will be a object so angular can loop over this easily )
    

I have everything in angular HTMl + Angular Scope which is used in HTML . Now
The main thing is how to bind them together so that HTML gets angular scope
and loop over the data. For this I am using angular directive .

**HTML :**

    
    
    <div dynamic="html_response"></div>
    

**Angular directive :**

    
    
    app.directive('dynamic', function ($compile) {
      return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
          scope.$watch(attrs.dynamic, function(html) {
            ele.html(html);
            $compile(ele.contents())(scope);
          });
        }
      };
    }); 
    

This directive is doing binding of angular scope with HTML for me .

Everything was working for me until I got one issue . AS I explained above I
am rendering HTML first then binding angular scope. But In one of my case (a
js slider) I need to render angular first then render HTML (js code) means
slider js must render after angular so that slider can already have data
available to show .

But I can't render angular data from python side first . I have to send HTML
response to angular whatever it includes .

Is their any other approach or something I can do at angular end so that I can
solve my issue .


Answer: One approach you can take is to separate the HTML/CSS/JS rendering from the
data itself.

You can achieve this by first generating the HTML/CSS/JS in Python and have
Angular then fetch the data (in JSON format?) needed for the JS slider from
the Django backend and render it. This means you would have 2 accesses to the
backend - one for the page itself and the other for the data required by the
page.

