How can I dynamicly change the tag?</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2014-10-27T17:40:22.727" class="fromnow">Oct 27 '14 at 17:40</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2014-10-27T18:14:16.547" datetime="2014-10-27T18:14:16.547">Oct 27 '14 at 18:14</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 268 times"> <span class="fc-light mr2">Viewed</span> 268 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="26593481" data-ownerid="4186914" data-score="1"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26593481"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value="2">2</div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Please I wanna know how to change the inside the dynamically in angularjs.</p> <p>I'm using the NGresource and pulling json data from the back-end and i want to change it dynamically then i go to a new article for example. </p></div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/angularjs" class="post-tag js-gps-track" title="show questions tagged 'angularjs'" rel="tag">angularjs</a> <a href="../../questions/tagged/title" class="post-tag js-gps-track" title="show questions tagged 'title'" rel="tag">title</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Oct 27 '14 at 17:43">edited Oct 27 '14 at 17:43</time> <a href="../../users/1058134/huangism" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1058134.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Huangism" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1058134/huangism" class="s-user-card--link">Huangism</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">15,324</li> <li class="s-award-bling s-award-blinggold" title="5 gold badges">5</li> <li class="s-award-bling s-award-blingsilver" title="45 silver badges">45</li> <li class="s-award-bling s-award-blingbronze" title="64 bronze badges">64</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Oct 27 '14 at 17:40">asked Oct 27 '14 at 17:40</time> <a href="../../users/4186914/donzee" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4186914.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="donzee" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/4186914/donzee" class="s-user-card--link">donzee</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">75</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-26593481" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="26593481" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-41801924" class="comment js-comment " data-comment-id="41801924" data-comment-owner-id="2615057" data-comment-score="2"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">2</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41801924_26593481"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">You might be able to just use some old fashioned javascript. Here's a related post.. http://stackoverflow.com/questions/413439/how-to-dynamically-change-a-web-pages-title</span> – <a href="../../users/2615057/jroot" title="168 reputation" class="comment-user ">jroot</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/26593481/how-can-i-dynamicly-change-the-title-tag#comment41801924_26593481"><span title="2014-10-27T17:46:32.827 License: CC BY-SA 3.0" class="relativetime-clean">Oct 27 '14 at 17:46</span></a></span> </div> </div> </li> <li id="comment-41802108" class="comment js-comment " data-comment-id="41802108" data-comment-owner-id="2881286" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41802108_26593481"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">possible duplicate of [How to dynamically change header based on angularjs partial view?](http://stackoverflow.com/questions/12506329/how-to-dynamically-change-header-based-on-angularjs-partial-view)</span> – <a href="../../users/2881286/grundy" title="13,060 reputation" class="comment-user ">Grundy</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/26593481/how-can-i-dynamicly-change-the-title-tag#comment41802108_26593481"><span title="2014-10-27T17:51:39.473 License: CC BY-SA 3.0" class="relativetime-clean">Oct 27 '14 at 17:51</span></a></span> </div> </div> </li> <li id="comment-41802188" class="comment js-comment " data-comment-id="41802188" data-comment-owner-id="4186914" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41802188_26593481"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">not duplicated because am asking about pulling data from a resource and put it as title element</span> – <a href="../../users/4186914/donzee" title="75 reputation" class="comment-user owner">donzee</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/26593481/how-can-i-dynamicly-change-the-title-tag#comment41802188_26593481"><span title="2014-10-27T17:53:55.287 License: CC BY-SA 3.0" class="relativetime-clean">Oct 27 '14 at 17:53</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">4 Answers<span style="display:none;" itemprop="answerCount">4</span></h2> </div> </div> </div> <a name="26593714"></a> <div id="answer-26593714" class="answer accepted-answer" data-answerid="26593714" data-ownerid="1132405" data-score="3" itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26593714"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="3">3</div> <div class="js-accepted-answer-indicator grid--cell fc-green-500 py6 mtn8"><div class="ta-center"><svg aria-hidden="true" class="svg-icon iconCheckmarkLg" width="36" height="36" viewBox="0 0 36 36"><path d="m6 14 8 8L30 6v8L14 30l-8-8v-8z"></path></svg></div></div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>You can change the HTML title and head elements on a per-view basis by using <a class="external-link" href="https://github.com/apparentlymart/angularjs-viewhead" rel="nofollow noreferrer">angularjs-viewhead</a>.</p> <p>here how to use it.</p> <ol> <li><p>put the angularjs-viewhead.js in your asset folder</p> </li> <li><p>Declare as a dependency of your application as normal</p> <blockquote> <p>var app = angular.module('myApp', ['ng', 'viewhead']);</p> </blockquote> </li> <li><p>This sort of setup can be achieved in an AngularJS application using the view-title directive. First, set up your title element to bind to the special scope variable viewTitle, which will be set when a tilted view is instantiated:</p> </li> </ol> <pre class="s-code-block"><code> </title ng-bind-template="{{viewTitle}} - FooBaz">FooBaz</title> </code></pre> <ol start="4"> <li>With this in place, add to each view's template a single view-title element setting the view's title:</li> </ol> <pre class="s-code-block"><code> <view-title>About</view-title> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Jun 20 '20 at 09:12">edited Jun 20 '20 at 09:12</time> <a href="../../users/-1/community" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/-1.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Community" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/-1/community" class="s-user-card--link">Community</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1</li> <li class="s-award-bling s-award-blingsilver" title="1 silver badges">1</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 27 '14 at 17:51">answered Oct 27 '14 at 17:51</time> <a href="../../users/1132405/dyaa" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/1132405.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="dyaa" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/1132405/dyaa" class="s-user-card--link">dyaa</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,290</li> <li class="s-award-bling s-award-blingsilver" title="16 silver badges">16</li> <li class="s-award-bling s-award-blingbronze" title="40 bronze badges">40</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-26593714" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="26593714" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-41802270" class="comment js-comment " data-comment-id="41802270" data-comment-owner-id="4186914" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41802270_26593714"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Thank you but what if i wanna inject a <link/> or <meta/> !</span> – <a href="../../users/4186914/donzee" title="75 reputation" class="comment-user owner">donzee</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/26593481/how-can-i-dynamicly-change-the-title-tag#comment41802270_26593714"><span title="2014-10-27T17:56:17.910 License: CC BY-SA 3.0" class="relativetime-clean">Oct 27 '14 at 17:56</span></a></span> </div> </div> </li> <li id="comment-41802371" class="comment js-comment " data-comment-id="41802371" data-comment-owner-id="1132405" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment41802371_26593714"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">To add per-view metadata elements to the HTML head, place them near the top of your view template (it doesn't really matter where you put them as long as the are directly in the view scope, not nested inside something like ng-repeat) and add the view-head directive attribute. For example: <link href="{{rssUrl}}" rel="alternate" type="application/rss+xml" view-head=""/> <meta content="article" property="og:type" view-head=""/></span> – <a href="../../users/1132405/dyaa" title="1,290 reputation" class="comment-user ">dyaa</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/26593481/how-can-i-dynamicly-change-the-title-tag#comment41802371_26593714"><span title="2014-10-27T17:59:16.673 License: CC BY-SA 3.0" class="relativetime-clean">Oct 27 '14 at 17:59</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="26593698"></a> <div id="answer-26593698" class="answer " data-answerid="26593698" data-ownerid="954940" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26593698"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Like so:</p> <pre class="s-code-block"><code>document.title = 'Text'; </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 27 '14 at 17:50">answered Oct 27 '14 at 17:50</time> <a href="../../users/954940/adam" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/954940.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Adam" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/954940/adam" class="s-user-card--link">Adam</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">41,349</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="58 silver badges">58</li> <li class="s-award-bling s-award-blingbronze" title="78 bronze badges">78</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="26593892"></a> <div id="answer-26593892" class="answer " data-answerid="26593892" data-ownerid="3542932" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26593892"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Changing your title in JS is tricky when dealing with search engines as you may get curly braces in search results or the title for the page won't be right. However, if you have a rendering server for Google/Bing/Yahoo!, then it'll show up right when crawled. That, however, is another issue entirely. In order to do this, move your <code>ng-app</code> directive to the <code>html</code> attribute:</p> <pre class="s-code-block"><code><html ng-app="myApp"> <head> <title ng-bind="titleService.currentTitle">My Default Title</title> </head> <body> <ng-view></ng-view> </body> </html> </code></pre> <p>Then create a service and bind it to the root scope:</p> <pre class="s-code-block"><code>angular.module('myApp') .service('TitleService', function($location) { var DEFAULT_TITLE = 'My Default Title'; return { setTitle: function(title) { this.currentTitle = title || DEFAULT_TITLE; } }; }); angular.module('myApp').run(function(TitleService, $rootScope) { // This is mainly for a separation of concerns. These lines could // easily go in the service definition. $rootScope.$on('$locationChangeSuccess', TitleService.setTitle); $rootScope.titleService = TitleService; }); </code></pre> <p>This assures that the default title will always be set by default. However, if you would like to set the title on a per-controller/directive basis you can do this inside of your code:</p> <pre class="s-code-block"><code>angular.module('myApp') .controller('MainCtrl', function($scope, $location, TitleService, Article) { // I'm just guessing what your logic might look like var id = $location.search().articleId; Article.get(id).then(function(article){ // Set the title however you want with article data TitleService.setTitle(article.title); }); }); </code></pre> <p><strong>EDIT:</strong> I moved a line to the run function to separate the concerns of the service from the concerns of the application.</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="user-info "> <div class="user-action-time">edited <span title="2014-10-27T18:14:16.547" class="relativetime">Oct 27 '14 at 18:14</span></div> <div class="user-gravatar32"></div> <div class="user-details" itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span class="d-none" itemprop="name">Mike Quinlan</span> <div class="-flair"></div> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 27 '14 at 18:01">answered Oct 27 '14 at 18:01</time> <a href="../../users/3542932/mike-quinlan" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3542932.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Mike Quinlan" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/3542932/mike-quinlan" class="s-user-card--link">Mike Quinlan</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,574</li> <li class="s-award-bling s-award-blingsilver" title="15 silver badges">15</li> <li class="s-award-bling s-award-blingbronze" title="21 bronze badges">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="26593673"></a> <div id="answer-26593673" class="answer " data-answerid="26593673" data-ownerid="3858391" data-score="-1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="26593673"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="-1">-1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Try this:</p> <pre class="s-code-block"><code>document.title.innerHTML = "" //Text Goes in Quotes. </code></pre> <p>Good luck!</p></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Oct 27 '14 at 17:49">answered Oct 27 '14 at 17:49</time> <a href="../../users/3858391/dripdrop" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/3858391.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="DripDrop" onerror="onImageLoadingError(this);" /> </a> <div class="s-user-card--info"> <a href="../../users/3858391/dripdrop" class="s-user-card--link">DripDrop</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">966</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="8 silver badge">8</li> <li class="s-award-bling s-award-blingbronze" title="18 bronze badge">18</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script> /* replace <time class="fromnow" /> with human delta between `datetime` attr and now */ document.addEventListener('DOMContentLoaded', function(){ var time_elements = document.querySelectorAll("time.fromnow"); for (var i=0; i<time_elements.length; i++) { time_elements[i].innerHTML = moment(time_elements[i].getAttribute("datetime")).fromNow(); } }); </script> </body> </html>