We Keep Coding

Dependency injection into HTML img src tag within an ng-repeat loop not working

I have a strange issue with my a value not properly working. Basically I have a big array of id's that correspond to images on a server.
Images: {
"Set1" : {
'Blue':['8277','8278','8279','8280','8281','8282','8283'],
'Green':['8284','8285'],
'Red':['8286','8287','8288','8289']
}
}
Within my controller model I have an ng-repeat that looks something like this.
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p>
<img src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">
</p>
</div>
</div>
My issue that it will not actually resolve the img onto the page. If I pull in imgs any other way it works fine.
Is this a problem with mixing HTML and within an ng-repeat loop?

use ng-src in place of just src
<img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000">

Using Angular markup like {{hash}} in a src attribute doesn't work right: The browser will fetch from the URL with the literal text {{hash}} until Angular replaces the expression inside {{hash}}. The ngSrc directive solves this problem.
Documents : https://docs.angularjs.org/api/ng/directive/ngSrc
<div ng-controller="myCtl">
<div ng-repeat="(key, value) in cities">
<p> <img ng-src="http://wesbite.api.com/{{value[0]}}/half?system=xxxxml&pubtoken=hfdshfgsjkhgkhfkjghkdshgjkshfhdffhksfhgdfhgdskhsgkf4658cee&refreshRate=2000"></p>
</div>
</div>

Angular template text in Safari on backwards navigation

I'm working on an Angular app that makes a call to a data service and then repeats the results in the view. Each result has a unique, external link. I've found that, in Safari, when you click the link and then navigate backwards with the browser button, you see only the bracketed Angular template text. So,
<div ng-repeat="i in items">
<div>{{i.name}}</div>
<div>{{i.location}}</div>
<div>{{i.link_name}}</div>
</div>
yields
{{i.name}}
{{i.location}}
{{i.link_name}}
with the anchor being just an empty link. This phenomenon does not appear in Chrome. The app is being served by Rails.

That is basically uncompiled html by angular shown on HTML. In that case I'd prefer you to use ng-bind directive to html on page.
<div ng-repeat="i in items">
<div ng-bind="i.name"></div>
<div ng-bind="i.location">{{i.}}</div>
<div><a ng-href="{{i.link}}" ng-bind="i.link_name"></a></div>
</div>

AngularJS not parsing curly braces properly

<li ng-repeat="appliance in appliances | limitTo:2">
<div class="icon">
<img src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
</div>
<div class="label">{{ appliance.Label }}</div>
</li>
In AngularJS I can see in the console that it tries to load '/images/vector/Appliances/w-%7B%7Bappliance.DashboardIcon%7D%7D.svg'. Now my ng-repeat works just fine. If I decodeURIComponent I see that the above %7B and %7D are '{' and '}' respectively. How can I prevent this error from happening?

Use ng-src here instead src
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">
Using Angular markup like {{hash}} in a src attribute doesn't work
right: The browser will fetch from the URL with the literal text
{{hash}} until Angular replaces the expression inside {{hash}}. The
ngSrc directive solves this problem.
The buggy way to write it:
<img src="http://www.gravatar.com/avatar/{{hash}}" alt="Description"/>
The correct way to write it:
<img ng-src="http://www.gravatar.com/avatar/{{hash}}" alt="Description" />\\
For more info see this link https://docs.angularjs.org/api/ng/directive/ngSrc

You have to use ng-src, if you use src, the browser tries to load the image before angular's loaded, that's why ng-src exists.
<img ng-src="images/vector/Appliances/w-{{appliance.DashboardIcon}}.svg">

Tumblr API - get JSON photo with AngularJS

I am trying to connect to tumblr API with angularJS
EDIT
I now I try to do:
JS:
tumblr.controller('tumblrs', function($scope, $http) {
$http.get("http://www.tinymediaempire.tumblr.com/api/read/json/")
.success(function(responses) {$scope.post = responses.response.posts;});
});
HTML:
<div ng-controller="tumblrs">
<ol>
<li ng-repeat="spost in post">{{ spost.photos[0].alt_sizes[0].url }}</li>
</ol>
</div>

In your JSON example I don't see a .photo_url_500 property in the photos objects.
I think you need to refer to .alt_sizes[1].url to get the url for a 500px image.
You also need to use ng-src attribute instead of src as the img tag will try and load from the literal text before angular has loaded:
<img ng-src="{{ photo.alt_sizes[1].url }}" />

Getting HREF of an html node

I have a page at http://www.entrepreneuronfire.com/podcast/edwinhavens/
With an image at http://i.imgur.com/u59IAXB.png
I need to get the download link (i.e. hxxp://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3) of the MP3 file at class named spp-dloada(as web inspector detects) but all my 48 hours attempt ended in smoke.
That download link shows well in chrome (as
<a href="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" download="Edwin_Havens.mp3">
<span class="spp-dloada"></span>
</a>
) but not in FireFox 38 and IE11 but i need them in these two browser.
For FireFox and IE11 HTML Snippet is
<div class="spp-controls">
<span class="spp-speed"/>
<span class="spp-share">
<div class="spp-share-options" style="display: none;">
<a class="spp-share-icon spp-twitter-btn" href="">Share</a>
<a class="spp-share-icon spp-fb-btn" href="">Share</a>
<a class="spp-share-icon spp-gplus-btn" href="">Share</a>
<!--Share-->
</div>
</span>
<span class="spp-dload"/>
<span class="spp-play"/>
Oddest thing is when i click on the download button (as shown in the above image)
iframe changes into
<iframe class="spp-downloader" style="display:none" src="http://www.entrepreneuronfire.com?spp_download=http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3"/>
What have tried so far are-
Software:firebug, temper data,modifyheaders
Language:XPATH, CCS Selector, Jquery
EDIT ---- Sorry for belated adjunct
I need pure XPATH expression too SINCE DIFFERENT BROWSER BEHAVES DIFFERENTLY
N.B. HTML SNIPPET IS FOR CHROME ONLY

The span inside of the link has a class, so you can just grab the parents 'href' attribute using jQuery like so:
$('.spp-dloada').parent().attr('href');
Fiddle
(This is of course assuming you have access to modify the code on this website.)
RE: Edit
It doesn't look like IE supports XPath, according to the answers here: jquery select element by xpath

If you view the source of the page, you can see that the source is different from the generated source you see when you inspect the element.
The link you are trying to fetch is not in the actual page source, however, this is:
<div class="smart-track-player stp-color-ff6100" data-url="http://traffic.libsyn.com/entrepreneuronfire/Edwin_Havens.mp3" data-download="true"data-color="ff6100" data-title="Edwin Havens" data-artist="John Lee Dumas chats with" data-uid="IU5Uvc7G" ></div>
I'm guessing the page then has some Javascript functionality which generates a clickable link from this markup.
Try using this jQuery code to access the download url:
$('.smart-track-player').attr('data-url');
An XPath expression to fetch this node would be something like this:
//div[#class='smart-track-player stp-color-ff6100']