Creating a URL link with href not going to the URL

We have a page that is using AngularJS. I am creating a link:

<div ng-if="breakout.AttachmentFiles">
    <div ng-repeat="file in breakout.AttachmentFiles" style="display: flex; align-items:baseline;">
        <b style="width: 95px; text-align: right">Attachments:</b>
        <a href="file.Url">{{file.Url}}</a>
    </div>
</div>

File structure is:

  else if (itemKey === "AttachmentFiles") {
    var foobar = [];

    angular.forEach(itemValue.results, function(value, key) {
      foobar.push({"Url": $location.$$host+value.ServerRelativeUrl+"", "FileName": value.FileName});
    });


    console.log("AttachmentFiles | foobar: ", foobar);

    currentBreakout[itemKey] = foobar;
  }

For the text of the href displays the correct url, but the link it self goes off to a /Pages/file.Url:

What am I doing wrong?

EDIT:

I changed

<a href="file.Url">{{file.Url}}</a>

to

<a href={{file.Url}}>{{file.Url}}</a>

and that gives me a new link:

So for some reason https://company.sharepoint.com/sites/siteName/Pages/ is being inserted before the actual URL.

Solved:

With the help from Ganash's post about using {{}} instead of "" and adding http:// to the url, the link is now working correctly.