Анимация SVG-пути при изменении значения

Я пытаюсь создать граф, используя SVG и директиву angular для изменения динамических частей. Сейчас я сделал это:

http://plnkr.co/edit/TcbK7kyzM3tapDISxndh?p=preview

app.directive('pieChart', function($document) {
    return {
        restrict: "E",
        template: '<svg width="500" height="500">' +
          '<path d="M100,200 a150,150 0 1,0 150,-150" stroke="black" stroke-width="10" fill="none"></path>' +
        '</svg>',
        scope: {
          value: '='
        },
        link: function(scope, elem, attr) {
        }
    }
});

Я хочу, чтобы мой график выглядел так, когда он 100% значение, а когда значение - скажем - 45%, я хотел бы видеть эту строку, но только с 45% ее длины из верхнего центра, Мне, вероятно, придется пересчитать значение пути пути, но я хотел спросить, возможно ли, когда я изменяю путь с помощью JS, чтобы сделать его анимированным, когда он меняет размер?

Спасибо заранее, или если кто-то из вас знает хороший учебник по этому материалу, пожалуйста, соедините его со мной.

EDIT: я изменил директиву на простой гистограмму, но это, к примеру, я знаю, что это можно сделать без SVG, поскольку вы можете сделать это с помощью div, но я хочу, чтобы график был более сложным после.

Здесь jsfiddle http://jsfiddle.net/fg9e7eo4/1/

В моем примере диаграмма продолжает анимацию, и я хотел бы сделать ее анимацией только один раз и чем оставаться в этой точке.

Кстати, это директива, которую я пытаюсь сделать, чтобы она работала:

testApp.directive('pieChart', function() {
  var html = 
    '<svg width="510" height="20" style="background: #fff">' +
      '<path d="{{path}}" stroke="red" stroke-width="10" fill="none">' +
        '<animate dur="1s" repeatCount="indefinite" attributeName="d" values="{{path2}}"/>' +
      '</path>' +
    '</svg>';

  return {
    restrict: 'E',
    template: html,
    scope: {
      'value': '='
    },

    link: function(scope, elem, attrs) {

      scope.$watch('value', function(newValue, oldValue) {
        scope.path = 'M 5 10, L ' + (newValue * 5) + ' 10';
        scope.path2 = 'M 5 10, L ' + (oldValue * 5) + ' 10; M 5 10, L ' + (newValue * 5) + ' 10';
        elem.children().children().beginElement();
      });

    }
  };
});