Object tag value set in HTML page with Angular JS model not working in Microsoft Edge browser

Question

I have a HTML like following;

  <div class="tab-content">
    <div ng-repeat = "(key,val) in reportCollection" id="{{val.url}}" class="tab-pane fade in" ng-class="{'active': $index == 0}" repeat-done="layoutDone()">
      <object data="{{val.url}}/index.php" style="width:100%;height:80%;"></object>
    </div>
  </div>

Now via a controller I am updating a model "reportCollection" after an ajax call,

$http.get("ajax_config.php")
        .then(function(response) {
            $scope.reportCollection = response.data;

        });

In Chrome and Firefox soon after updating model different http request is being sent for different object tag inside ng-repeat(I checked from developer console and network tab). So everything is fine.

But in Edge different ajax call is being occurred but the ajax call path is val.url not the actual urls inside the collection.

As for example lets say my collection is;

var reportCollection = [

              {'url':'test.html',....},
              {'url':'myPage.html',....}

]

Now http request url in chrome and firefox as;

     http://.../.../.../test.html
     http://.../.../.../mtPage.html

But in edge it is like;

     http://.../.../.../%7B%7Bval.url%7D%7D/

So clearly it is taking as {{val.url}} as URL.

Can you please give me a detail insight about why is this happening and how to resolve it?

Answer 1

I believe this issue is covered in this post: angularjs expression in html tag

Basically, Edge is evaluating the data attribute before angular has a chance to replace the val.url property. Try using the accepted answer on the link above.

Answer 2

Try, to make it this way:

 <object data="{{val.url+'/index.php'}}" ....>

Or:

<object ng-attr-data="{{....}}" >