Angular Dynamic meta tags in head

Question

I need to insert open graph meta tags on a particular page in an angular app.

These tags are different based on the news or video that the page has.

I tried

Answer 1

I want to re-answer this question. Infact, all your need a directive. You should set all your meta values as an object such as : {name:'keywords',content:'angularjs, directive,meta'}

If you want to add it on $rootScope it can be like this :

$rootScope.metas = [{
  name:'description',
  content :'AngularJS meta example'
},{
  name:'keywords',
  content :'AngularJS, metas, example'
},{
  charset:'UTF-8'
}];

Then you can use object's keys as an attribute and theirs value. Repeat the directive and pass all your metas in it. If you dont want a clear html you can create an empty meta element in javascript and add attributes on it. Then replace the directive element's outerHTML with your the new meta element's outerHTML. You can check this page : Simple Dynamic Meta Tags in AngularJS