A/B Testing in Angular with Optmizely
Switch branches/tags
Clone or download
Latest commit 2771da1 Jan 16, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore add npm support Jan 12, 2016
README.md Update readme for package name #1 May 19, 2014
bower.json new version Nov 16, 2015
ngshowvariant.js Minify friendliness. Fixes #2 Jul 22, 2014
package.json add npm support Jan 12, 2016



A simple directive to allow A/B testing with optimizely in angular applications.


  1. bower install angular-optimizely
  2. Include the ngshowvariant.js script provided by this component into your app.
  3. Add ngshowvariant as a module dependency to your app.
  4. Insert the ng-show-variant directive into your template where you wish to conditionally show items.
    <div ng-show-variant="alphabet">variant alphabet is running</div>
    <div ng-show-variant="cactus">variant cactus is running</div>
    <div ng-show-variant="cactus,alphabet">variant cactus or alphabet is running</div>
    <div ng-show-variant="none">No variant is enabled</div>
    <div ng-show-variant="cactus,none">either variant cactus or no variant is enabled</div>

In optimizely, add custom javascript where you wish to change the variant:

//set which variant you would like
window.variant= "optmizely1";

//tell angular the variant has changed.
var scope = angular.element(document.getElementById('main')).injector().get('$rootScope');

scope.$apply( function() {