We Keep Coding

HTML - inline tags not refelecting

I have a page where it loads some values from a spreadsheet, and displays the values on the page. (i.e. so it can handle multiple languages).
Problem
When I put html tags in the spreadsheet, they are not applied.
Example
If I put the following text in an html file and view it, the browser applies the html tags as expected.
<div><a href='http://...'>some <br> value</a></div>
However, when it is applied loaded from the spreadsheet, the <br> tag is not applied and it stays on one line.
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2">{{ 'gcdm-login.forgotten_password' |
translate }}</a>
</div>
Also, if I update the value in Chromes Developer tools, the value changes in the browser, but html tags are not applied. It is as if the browsers display does not refresh to apply html tags.
Question
Is there a way I can get the html tags read in from the spreadsheet applied?
Is this a timing issue, meaning that the DOM is rendered already and cannot be changed on the fly?
Thanks

It really depends on what version of Angular you use, but for all it resumes to one thing: you have to bind your text as HTML by using either ng-bind-html directive or [innerHTML] property.
AngularJS:
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2" ng-bind-html="'gcdm-login.forgotten_password' | translate"></a>
</div>
Angular 2-6:
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword"
class="bmw-command-link bmw-mt-2 bmw-mb-2" [innerHTML]="'gcdm-login.forgotten_password' | translate"></a>
</div>
I've also made you an working example here.

its work fine
try this
<div class="col-xs-12 col-sm-6 pull-right">
<a ui-sref="open.registration.login.resetPassword" class="bmw-command-link bmw-mt-2 bmw-mb-2">forgotten<br>password</a>
</div>

How to load HTML after content has been loaded

I am trying to get a list of the content on a website (this one if anyone is interested). The layout has changed recently and now they do not load the content all at once, but with magic (js probably). I'm currently using JSoup to analyze the HTML, but im open to suggestions.
This is what i am getting:
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<div class="loading-spinner" data-v-6e4dbe9e> //the devil himself
<div class="spinner" data-v-ac3cb376 data-v-6e4dbe9e>
<div class="rect1" data-v-ac3cb376></div>
<div class="rect2" data-v-ac3cb376></div>
<div class="rect3" data-v-ac3cb376></div>
<div class="rect4" data-v-ac3cb376></div>
<div class="rect5" data-v-ac3cb376></div>
</div>
</div>
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
//Here should be stuff!
</div>
</div>
</div>
the code that achieves this:
String selector = "div.podcasts-items";
Elements elem = Jsoup.connect(link).get().select(selector)
System.out.println("html: "+elem.html());
This is what i would like to see (copied from inspect element after the page has loaded all the content):
<div class="row" data-v-6e4dbe9e>
<div class="col-17 podcasts-group" data-v-6e4dbe9e>
<!----> //begone evil!
<div mode="in-out" class="transition-group row" data-v-6e4dbe9e>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
<div class="col-17 col-md-8 center-margin" data-v-6e4dbe9e="">...</div>
</div>
</div>
</div>
Google doesn't help much, because every content related to spinners etc. is about javascript.
solution:
due to the fact that JSoup only loads the HTML and does not execute any javascript the page never had a chance to load the content. You would have to use an actual browser engine or a webdriver like selenium to get the data to load.
For this specific problem I was able to get the content directly via loading the Json data through this webpage's API.

If I understood your question then your best bet is to use Selenium driver. Link to similar question

ui.bootstrap accordion remain open during ajax request

I'm using ui.bootstrap accordion in an angular app to show show content to the user that I get with an ajax request from a server. I use long polling to fetch the data so they are refreshed automatically. However when an accordion from the group is open and the user reads the content, upon refresh accordion closes. How can I prevent this from happening? One idea is to be able to tell if any accordion is collapsed and stop the polling but I don't know how. I have read some articles with people taking advantage of is-open setting but I can't figure it out. Here is my code for the current accordion group.
<uib-accordion close-others="true">
<uib-accordion-group ng-repeat="message in newMessages">
<uib-accordion-heading>
<div class="row">
<div class="col-md-5">
title: {{message.attributes.subject}}
</div>
</div>
</uib-accordion-heading>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
{{message.attributes.body}}
</div>
</div>
</div>
</uib-accordion-group>

How do I put a couple of elements inside template?

I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.

Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.

Make main template which contains header, body and footer.
Add partials to the main template.

If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>

Change included page and URL without re-initializing controller in AngularJS

I am making an application using AngularJS and want to be able to switch between "tabs" and swap back and forth different "partials" or html templates into a panel/container (using ngInclude).
Here's my template, which is wrapped inside a ngView.
<div class="row">
<div class="col-md-3">
<div class="list-group" data-fixed-sidebar data-nav-control>
<a href="#/analyze/option1" class="list-group-item" data-tab-route="/analyze/option1.*" >Analyze Option 1</a>
Analyze Option 2
Analyze Option 3
Analyze Option 4
</div>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="panel-body">
<div ng-include="child"></div>
</div>
</div>
</div>
</div>
The problem is, when I click on one of the links (for example, the first link which routes to #/analyze/option1) it will reload my controller and lose track of it's current state. I am using $route and $routeProvider and would prefer a solution that keeps using this module.

Controllers are meant to be ephemeral. The correct way (TM), in my opinion, to do it would be to put the necessary state in an service, which is initialized in a singleton fashion and will retain state between route changes.